在 font awesome 4 中，您可以使用 CSS 轻松地将图标应用于 :before/:after 元素。
新的 font awesome 5 JS/SVG 实现是否也能做到这一点？据我所见，这需要相关标签存在于 html 中，这并不总是实用的，例如您有一个 CMS 并希望将图标应用于所有用户创建的内容 <li> 元素
我知道在 FA5 中你仍然可以使用旧的 css/webfonts 但如果在推荐的使用 JS 的方法中提供相同的功能会很好
【问题讨论】：
标签： font-awesome font-awesome-5
指定正确的 font-weight 似乎是正确显示某些符号的关键（而不是“□□□”）。
font-weight 必须是：
400 用于 Regular 和 Brands 符号900 用于Solid 符号300 用于Light 符号即如果您将 Font-Awesome 与 CSS + Webfonts 一起使用，那么纯 CSS 的解决方案是：
@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */
/* ... */
.class:before {
/* >> Symbol you want to use: */
content: "\f16c";
/* >> Name of the FA free font (mandatory), e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
- 'Font Awesome 5 Brand' for Brands symbols. */
font-family: 'Font Awesome 5 Free';
/* >> Weight of the font (mandatory):
- 400 for Regular and Brands symbols;
- 900 for Solid symbols;
- 300 for Light symbols. */
font-weight: 900;
/* >> Optional styling: */
display: inline-block;
/* ... */
}
【讨论】：
font-weight 是做什么的？我只使用实心图标，font-weight 似乎没有效果。我可以省略它，或者将它的值设置为 400 或 900，我总是能按预期看到图标。
您需要启用它（默认禁用）。
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
CSS：
.class:before{
display: none;
content: "\f16c";
font-family: "Font Awesome 5 Brands";
}
其他类型： Font Awesome 5 + Solid or Regular or Light or Brands
【讨论】：
我认为它的工作正常，就像这样：
.class:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
【讨论】：
我有 5 个可以使用
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
在<head> 和
:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "\f167";
}
在我的 CSS 中
【讨论】：
Font Awesome 5，在我使用免费版本时，所有热门答案都不起作用。 正确答案在this question。 检查您的字体类型（免费或专业），然后按照：
免费
font-family: "Font Awesome 5 Free"
专业版
font-family: "Font Awesome 5 Pro"
品牌
font-family: "Font Awesome 5 Brands"
别忘了我只是在 HTML 中使用了链接标签和我的 CSS 文件的路径。 不需要启用也没有将 all.css 文件导入我的 css 文件。现在它正在工作！
【讨论】：
使用此链接->：https://use.fontawesome.com/releases/v5.5.0/css/all.css
CSS
ul li{
list-style-type: none;
position: relative;
}
ul li:before{
position: absolute;
color:#ff0000;
top:0;
left:-30px;
font-family: 'Font Awesome 5 Free';
font-size:1.2em;
content: "\f105";
font-weight: 900; /* <-- add this or 400 for other styles */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
【讨论】：
当我设置这个值时我的问题消失了：font-weight: 900;
【讨论】：
如果您使用Fort Awesome 来提供您的图标，那么您需要添加font-family: <my-kit-name>，不需要使用font-weight: 400/900。
欲了解更多信息，请参阅此链接：
https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a
【讨论】：