html - 用 less/css 覆盖字体很棒的图标

Question

我想使用 font awesome overlays 创建一个自定义图标，我可以很容易地使用以下 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 元素。这可能吗，如果可能的话，关于如何完成的任何指示？我不太熟悉 less，但基于它的解决方案也可以。

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

Answer 1

好的，用 less 搞清楚了。如果其他人试图这样做:

@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;
    }
}