用less / css覆盖字体真棒图标

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>

问题是我不知道如何创建一个CSS规则来生成所需的DOM元素。 这有可能吗？如果可以的话，有什么方法可以做到呢？ 我不太熟悉，但是基于此的解决方案也很好。

我知道如何使用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;
    }
}