伪元素上的 Font awesome 5

Question

在 font awesome 4 中，您可以使用 CSS.

轻松地将图标应用于 :before/:after 元素

新的 font awesome 5 JS/SVG 实现是否也有同样的效果？据我所知，这需要相关标签存在于 html 中，这并不总是实用的，例如您有一个 CMS 并希望将图标应用于所有用户创建的内容 <li> 元素

我知道在 FA5 中你仍然可以使用旧的 css/webfonts 但如果在推荐的使用 JS 的方法中提供相同的功能就更好了

Answer 1

您需要启用它（默认情况下禁用）。

<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

Answer 2

指定正确的 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;
    /* ... */
}

Answer 3

我有 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

Answer 4

我认为它工作正常，就像这样：

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

Answer 5

如果您使用 Fort Awesome 来提供您的图标，那么您需要添加 font-family: <my-kit-name>，而不需要使用 font-weight: 400/900。

有关详细信息，请参阅此 link：

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

Answer 6

使用这个 Link ->: 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;
}

Answer 7

当我设置这个值时，我的问题消失了：font-weight: 900;

Answer 8

Font Awesome 5，因为我使用的是免费版本，所以所有最佳答案都不适用于我的情况。正确答案在中。检查您的字体类型（免费或专业版），然后按照：

免费

font-family: "Font Awesome 5 Free"

临

font-family: "Font Awesome 5 Pro"

品牌

font-family: "Font Awesome 5 Brands"

不要忘记我刚刚在 HTML 中使用了 link 标签和我的 CSS 文件的路径。不需要启用也没有将 all.css 文件导入我的 css 文件。现在可以使用了！

伪元素上的 Font awesome 5

Font awesome 5 on pseudo elements

font-awesome

font-awesome-5