57

在 font awesome 4 中，您可以使用 CSS 轻松地将图标应用于 :before/:after 元素。

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

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

4

8 回答 8

167

指定正确的font-weight似乎是正确显示某些符号的关键（而不是“□□□”）。

font-weight必须：

  • 400Regular和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;
    /* ... */
}
于 2017-12-12T14:47:44.993 回答
51

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

<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

于 2017-12-08T23:40:37.213 回答
20

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

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
于 2018-02-22T15:56:56.967 回答
11

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

于 2018-02-15T20:30:26.627 回答
6

Font Awesome 5，在我使用免费版本时，所有热门答案都不适用于我的情况。正确答案在这个问题中。检查您的字体类型（免费或专业），然后按照：

自由的

font-family: "Font Awesome 5 Free"

临

font-family: "Font Awesome 5 Pro"

品牌

font-family: "Font Awesome 5 Brands"

不要忘记我只是在 HTML 中使用了链接标签和我的 CSS 文件的路径。不需要启用也没有将 all.css 文件导入我的 css 文件。现在它正在工作！

于 2020-04-23T11:04:00.147 回答
2

使用此链接->：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;
}
于 2018-11-08T15:44:15.710 回答
2

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

于 2018-12-12T11:42:37.027 回答
1

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

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

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

于 2018-10-09T07:38:27.093 回答