【问题标题】:Font Awesome 5 Free CSS/Webfonts pseudo character not showing [duplicate]Font Awesome 5 Free CSS/Webfonts 伪字符未显示 [重复]
【发布时间】:2018-02-20 01:13:24
【问题描述】:

我有一个外部链接字符没有以伪元素样式显示的问题。正在显示其他字符。

Font-Awesome 5.0.6 免费,CSS/Webfont 版本,通过 CDN 包含: https://use.fontawesome.com/releases/v5.0.6/css/all.css

这适用于我的正常身体内容:

<i class="fas fa-external-link-alt"></i>

在 CSS 中,这不起作用:

a:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f35d';
}

在伪中使用另一个字符确实有效:

a:after {
 font-family: 'Font Awesome 5 Free';
 content: '\f152';
}

根据文档,外部链接图标是 FA5 Free 集的一部分:https://fontawesome.com/icons/external-link-alt?style=solid

这是一个错误还是我遗漏了什么?

编辑 1: JS 小提琴示例: https://jsfiddle.net/berjcaLy/4/

编辑 2: 偶然发现将&lt;a&gt;标签包裹在&lt;b&gt;&lt;strong&gt;中会使外部链接伪图标起作用。 (JSfiddle 也更新了)

【问题讨论】:

    标签: css pseudo-element font-awesome-5


    【解决方案1】:

    使用

    字体粗细:900

    它必须是 900。

    【讨论】:

    • 谢谢,我现在也找到了其他一些参考资料。不过,这对我来说似乎不一致。在 FA 的 Github 中提到“当您在自定义 css 类中使用纯色图标时,Font Awesome 5 还需要 font-weight: 900;”,但是 \f152 字符在 fas(纯色)时工作得很好,而不是 900。 GitHub:github.com/FortAwesome/Font-Awesome/issues/11946
    • 经过更多挖掘,所有 Font-Awesome 5 Free 样式都必须以“Solid”样式提供。如果在自己的 CSS 样式中使用,所有实体样式都需要为 font-weight:900。 \f152 也可以在不需要 900 字体宽度的“常规”中免费使用 - 因此它显示了。
    • 供参考:fontawesome.com/how-to-use/web-fonts-with-css Solid font-weight: 900 / Regular font-weight: 400 / Light font-weight: 300 / Brands font-weight: 400
    猜你喜欢
    • 2018-11-13
    • 1970-01-01
    • 2019-12-01
    • 2020-03-26
    • 2018-05-22
    • 2023-03-09
    • 2020-05-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多