Font Awesome 5，为什么没有显示 CSS 内容？

Question

我正在尝试在 CSS 的内容中使用 FontAwesome。

它与图标的代码一起出现，而不是图标。我已按照在线帮助进行操作，但仍然无法正常工作

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Answer 1

当你想包含 FontAwesome 时，你提供的 url 应该在head 标记内作为stylesheet 文件：

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

然后你就可以像以前一样使用 Font Awesome。

Answer 2

^{如果您使用的是 JS+SVG 版本，请阅读：Font Awesome 5 shows empty square when using the JS+SVG version}

首先，你只需要在head标签中包含Font Awesome 5的CSS文件：

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

或在 CSS 文件中：

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

然后您需要更正 font-family 和 content，如下所示：

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

<i class="fp-prev"></i>

在某些情况下，您还必须添加

font-weight:900

更多详情：Font Awesome 5 on pseudo elements shows square instead of icon

---

附带说明：Font Awesome 5 为每个图标包提供 4 个不同的font-family：

Font Awesome 5 Free 获取免费图标。

Font Awesome 5 Brands 用于 Facebook、Twitter 等品牌图标。

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
  color: #000;
  content: "\f099";
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

<i class="fp-prev"></i>

Font Awesome 5 Pro 为Font Awesome Pro。

Font Awesome 5 Duotone 也包含在 Pro 包中。

相关：Font Awesome 5 Choosing the correct font-family in pseudo-elements

Answer 3

我知道我真的迟到了。

您必须在标题中包含 Fontawesome CSS。

CDN -

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

如果你已经下载了源文件，那么包括如下

<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />

稍后您必须按如下方式添加 CSS -

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* replace / with \ */
    font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
}

如果你想通过<i>标签添加它，那么你可以关注

<i class="fas fa-arrow-alt-circle-right"></i>

确保您的字体粗细为 900。

参考 - https://github.com/FortAwesome/Font-Awesome/issues/11946

在 GitHub 中提出了同样的问题。他们建议对于纯字体真棒图标，font-weight 应该是900。

希望对大家有所帮助。

Answer 4

这也发生在我身上。我用过这个图标：就像使用 font awesome 5 cdn。

但是当我尝试选择同一个类然后编辑图标时，css 编辑没有在图标上运行。

因此，从 css 选择器上的“.fas fa-plus-square”中删除了“fas”，并将其改为“.fa-plus-square{}”。

所以 CSS 是这样的（对我来说）：.fa-plus-square{ float: right; } 我删除了“fas”。它对我有用。

Html 类在哪里<i class="fas fa-plus-square"></i>

还有我使用的 CDN：“https://use.fontawesome.com/releases/v5.0.7/css/all.css”。 希望对你有帮助

Answer 5

让你的font-weight: 900;。我看你想念它

Answer 6

由于颜色问题，这没有显示。请按照以下步骤操作：-

Step- 1. 在您的页面中复制此样式

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

第 2 步。将此代码复制到页面中 all.css 的顶部。

@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css"); 

Step- 3. 使用 font-family 以及 content 和 color like

   .password_invalid:before {
        color: #ff0000;
        content: '\f058';                     /* You should use \ and not /*/
        font-family: "Font Awesome 5 Free";  /* This is the correct font-family*/
        position: relative;
        margin-left: -36px;
        padding-right: 13px;
        font-weight: 400;
    }