“之前”伪元素在 Font Awesome v.5 中不起作用答案

【问题标题】：The "before" pseudo element not working in Font awesome v.5“之前”伪元素在 Font Awesome v.5 中不起作用
【发布时间】：2018-06-02 07:51:59
【问题描述】：

我做错了什么？

body {
  font-family: arial;
  font-size: 1.5rem;
}

li.facebook:before {
  content: "\f09a";
  font-family: FontAwesome;
}

li {
  list-style: none;
}

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
<ul>
  <li class="facebook">123 Drive.</li>
  <li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

【问题讨论】：

使用JS+SVG版本的相关问题：stackoverflow.com/q/48753688/8620333
处理font-weight问题的相关问题：stackoverflow.com/q/49754892/8620333

标签： css font-awesome-5

【解决方案1】：

更新 3：

font-family 是错误的。

使用font-family: "Font Awesome 5 Brands"

也许你必须设置一个font-weight 见documentation

更新 2：TL;DR

font-family 是错误的。

使用font-family: "Font Awesome 5 Brands"

对于Font Awesome 5，这必须是以下之一：

已更新，因为您使用 css webfonts：

对于使用 CSS 的 Web 字体方法

免费

font-family: "Font Awesome 5 Free"

专业版

font-family: "Font Awesome 5 Pro"

品牌 =>用这个！

font-family: "Font Awesome 5 Brands"

请看这里： https://jsfiddle.net/nwodoo32/1/

对于带有 Javascript 的 SVG 方法

固体

font-family: "Font Awesome 5 Solid"

常规

font-family: "Font Awesome 5 Regular"

品牌

font-family: "Font Awesome 5 Brands"

轻量级（专业版）

font-family: "Font Awesome 5 Light"

【讨论】：

它在其他任何地方都可以正常工作，但在 codepen.io 中，请注意。
"font-family: "Font Awesome 5 Free" 直到我添加了 "font-weight: 900;" 才起作用
需要考虑的其他事项：有时如果您不指定font-weight，它就不会显示。尝试从 100 到 900。
当所有其他方法都失败时，请阅读伪元素上的documentation。他们的网站列出了一个表格，其中包含每种样式的字体名称、重量等。

【解决方案2】：

您必须更改字体系列，还必须定义字体粗细。

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}

【讨论】：

font-family: "Font Awesome 5 Free"; 因为他想要品牌包中的 facebook 徽标，所以您的 font-family 是错误 - 请参阅我的答案。是的，他可以（不是必须）添加font-weight，但这不是他要求的
不会想到font-weight 可能是问题所在。谢谢！

【解决方案3】：

如果您想将字体与 :before 或 :after CSS 选择器一起使用，您还需要启用 Pseudo 元素。

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>

【讨论】：

工作就像一个魅力，但重要的是要注意此配置必须在导入/链接/合并fontawesome-free or pro JS 文件之前设置。

【解决方案4】：

第 1 步 - 为 dom 准备好的伪元素注册脚本

window.FontAwesomeConfig = {
    searchPseudoElements: true
}

第 2 步 - 使用 font-awesome 5 字体系列，如下所示（免费使用 font-weight 以上 600）

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    content: "\f105";
}

【讨论】：