Question

我想使用字体真棒覆盖创建自定义图标，我可以轻松使用以下html

<span style="width: 18px; height: 18px; line-height: 18px;" class="fa-stack">
    <i class="fa fa-circle fa-stack-1x" style="color: rgb(20, 77, 99); font-size: 18px;"></i>
    <i style="font-size: 12px;" class="fa fa-question fa-stack-1x fa-inverse"></i>
</span>

我可以简化一下我删除内联CSS，但我想要的是能够将整个思想包装在一个css类中以便于重用，这样我就可以做一些像

这样的事情

<i class="fa fa-my-icon"></i>

问题在于我不知道如何创建生成所需DOM元素的CSS规则。这是可能的，如果有的话，是否可以做任何指示？我不太熟悉，但基于此的解决方案也不错。

我知道如何使用javascript，但我想尽可能避免这种情况。

Answer 1

好的，用更少的数字计算出来。如果其他人试图这样做：

@import "font-awesome/less/variables.less";

@icon-size: 18px;

.icon-mixin() {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    left: 0;
}

.my-icon {
    position: relative;
    display: inline-block;
    width: @icon-size;
    height: @icon-size;
    line-height: @icon-size;
    vertical-align: middle;
    color: blue;

    &:before {
        content: @fa-var-circle;
        font-size: 18px;
        .icon-mixin;
    }
    &:after {
        content: @fa-var-question;
        vertical-align: middle;
        color: @fa-inverse;
        .icon-mixin;
    }
}

用less / css叠加字体真棒图标

1 个答案: