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 应该作为 stylesheet 文件位于 head 标签内：

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

然后就可以像刚才一样使用Font Awesome了。

Answer 2

^{如果您使用的是 JS+SVG 版本请阅读：}

首先，您只需要在 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 为每包图标提供 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 包中。

相关：

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

这也发生在我身上。我用过这个图标：和 using font awesome 5 cdn 一样。

但是当我尝试 select 相同 class 然后编辑图标时，css 编辑没有在图标上运行。

所以从 css select 上的“.fas fa-plus-square”中删除了 "fas" 或并使其成为“.fa-plus-square{}” .

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

其中 Html class 是 <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

由于颜色问题没有显示。请按照步骤:-

步骤- 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 and 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;
    }

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

Font Awesome 5, why is CSS content not showing?

css

font-awesome

pseudo-element

font-awesome-5

`font-weight:900`