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

【问题标题】：Overlay font awesome icons with less/css用less/css覆盖字体真棒图标
【发布时间】：2014-08-27 05:49:55
【问题描述】：

我想使用超棒的字体叠加创建一个自定义图标，我可以轻松地使用以下 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 规则。这可能吗，如果有的话，有什么关于如何完成的指示吗？我对less不太熟悉，但是基于它的解决方案也可以。

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

【问题讨论】：

标签： html css less font-awesome

【解决方案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;
    }
}

【讨论】：