0

我非常强烈地希望避免在我的标记中乱扔非语义<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;
}

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

结果使用修改后的 CSS。

虽然字体粗细恢复到正常（细）值，但对于标准标记和我想要的标记情况，文本的对齐方式已经大幅下降。这里发生了什么，我怎样才能icon-*在任意元素上使用这些类，而不会让这些元素自己的格式变得不合时宜？

感谢您提供的任何帮助！

4

2 回答 2

0

由于这已经困扰了很长时间，我将发布一个自我回答，指出我这些天使用的方法，其中涉及 SASS/SCSS 混合。

基本上，遵循 FontAwesome 本身的方法，除了填充用于非语义<i>（斜体）标签的 bajillion 通用 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帮助减轻。

于 2019-04-01T13:21:26.950 回答
-1

你里面的内容<h2 class="icon-list-ul">会受到[class*=" icon-"] ....
如果要对 h2-tags 和 before-elements 使用不同的字体样式，
只需保留[class*=" icon-"]:before和删除[class*=" icon-"]

于 2013-05-17T19:32:14.437 回答