25

我正在尝试在 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;
}
4

6 回答 6

94

如果您使用的是JS+SVG 版本，请阅读：Font Awesome 5 在使用 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")

然后您需要更正字体系列和如下内容：

@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 显示正方形而不是图标

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

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 在伪元素中选择正确的字体系列

于 2018-04-06T10:08:35.530 回答
22

做你的font-weight: 900;. 我看你想念它

于 2019-10-25T17:42:26.990 回答
1

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

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. 使用字体系列以及内容 和颜色

   .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;
    }

于 2021-03-19T10:40:32.957 回答
-1

这也发生在我身上。我曾经使用过这个图标：就像使用 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 ”。希望这可以帮助你

于 2019-09-06T16:07:32.470 回答
-4

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

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

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

于 2018-04-06T09:54:17.370 回答
-4

我知道我真的很晚才回答这个问题。

您必须在标题中包含 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.

希望这会对大家有所帮助。

于 2019-06-12T12:38:43.820 回答