Question

在字体真棒4中，您可以使用CSS轻松地将图标应用于：before /：after元素。

新的字体真棒5 JS / SVG实现是否可以？从我可以看到，这要求相关标签存在于html中，这并不总是实用的，例如您有一个CMS，并希望将图标应用于所有用户创建的内容<li>元素

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

Answer 1

指定正确的 font-weight 似乎是让一些符号正确显示的关键（而不是＆＃34;□□□＆＃34;相反）。

font-weight 必须是：

400 代表Regular和Brands符号
900 代表Solid符号
300 代表Light符号

即。如果你在CSS + Webfonts中使用Font-Awesome，那么只有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 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 2

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

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

的CSS：

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

其他类型： Font Awesome 5 + Solid或Regular或Light或Brands

Answer 3

我认为它的工作正常如下：

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

Answer 4

我使用

工作了5

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<{1>}和

中的

<head>

在我的CSS中

Answer 5

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文件中。现在可以了！

Answer 6

如果您要使用Fort Awesome来投放图标，则需要添加font-family: <my-kit-name>，而无需使用font-weight: 400/900。

有关更多信息，请参见此链接：

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

Answer 7

使用此链接->：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 8

当我设置以下值时，我的问题消失了：font-weight：900;

伪元素上的字体很棒5

8 个答案: