如何在任意标签上使用Font Awesome类？

Question

我非常强烈地希望避免使用非语义<i>标记乱丢我的标记，并尝试在其他元素上使用icon-* CSS类，例如标题，主要用例。

我有以下标记：

<div class="box-header">
    <h2><i class="icon-list-ul"></i><span class="break"></span>Unordered List</h2>
</div>

<div class="box-header">
    <h2 class="icon-list-ul">Unordered List</h2>
</div>

第一个是原始标记，第二个是我想要的标记。呈现，它们看起来像：

我稍后会担心分隔线。但是请注意文本“粗体”的区别。我注意到Font Awesome默认将其字体（以及其他一些属性）应用于CSS类匹配icon-*的任何东西，我第一次尝试纠正问题围绕着更改此css：

[class^="icon-"],
[class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    *margin-right: .3em;
}

进入以下内容以确保字体选择仅应用于:before图标内容：

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    *margin-right: .3em;
}

现在我有一个不同的问题，如下面的屏幕截图所示：

当字体粗细回到正常（细）值时，文本的对齐方式已大幅下调，无论是标准标记还是我想要的标记情况。这里发生了什么，如何在任意元素上使用icon-*类，而没有那些元素自己的格式变得不合时宜？

感谢您提供的任何帮助！

Answer 1

这个问题已经存在很长时间了，我将发布一个涉及SASS / SCSS混入的自我解答pointing out the methodology I utilize these days。

基本上，遵循FontAwesome本身的方法，不同之处在于，不是填充用于非语义<i>（斜体）标签的数十亿个通用CSS类，而是填充每个字符的SCSS变量，并动态地通过@include应用于您希望对其应用图标的特定元素。

从要点示例来看，要自动将社交媒体图标应用于链接到这些平台的链接，除非另行禁用，您可以：

a:not(.no-icon) {
    &[href^="https://twitter"],
    &[href^="https://www.twitter"] { @include icon($icon-twitter-square, false, true) { margin: 0; }; }

    &[href^="https://facebook.com"],
    &[href^="https://www.facebook.com"] { @include icon($icon-facebook-square, false, true) { margin: 0; }; }

    &[href^="https://linkedin.com"],
    &[href^="https://www.linkedin.com"] { @include icon($icon-linkedin-square, false, true) { margin: 0; }; }

    &[href^="https://youtube.com"],
    &[href^="https://www.youtube.com"] { @include icon($icon-youtube-square, false, true) { margin: 0; }; }
}

是否具有登录/注销链接？

&[href$="/account/authenticate"] { @include icon($icon-sign-in, false, true) { margin: 0; }; }

是否要在HTML标记中定义图标？好吧！

[data-icon] {
    padding-left: 3.5em;
    position: relative;
    vertical-align: middle;

    @include icon(attr(data-icon)) {
        margin-left: -3.5em;
        width: 3.5em;
        text-align: center;
    }
}

粗体的差异归结为应用了交替的字体平滑处理。强制使用-webkit-font-smoothing: antialiased和-moz-osx-font-smoothing: grayscale可以减轻负担。

Answer 2

<h2 class="icon-list-ul">中的内容会受到[class*=" icon-"] ...中awesomefont设置的影响。

如果要为h2-tags和before-elements使用不同的字体样式，
只需保留[class*=" icon-"]:before并删除[class*=" icon-"]

即可