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 回答