html - 伪元素上的 Font Awesome 5 显示正方形而不是图标

我正在尝试更改 span 的内容直接从 CSS 页面使用 Font Awesome 图标，但似乎无法使其正常工作。

1) 我已经从文档和 <head> 中导入了 FA

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) 我的 html 看起来像这样:

<span class='myClass'>Movies</span>

3) 现在假设我想直接从 CSS 页面使用图标更改 span 的内容。

我的 css 目前看起来像这样，但它不起作用，它给了我一个正方形而不是图标。

.myClass {
  font-size:25px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'></span>

有趣的是，它看起来像是在使用一些图标。如果我用 content: '\f007'; 测试有用。知道为什么吗？

(如果你想知道为什么我要直接在 CSS 中更改图标，那是因为我使用媒体查询所以我不能直接在 HTML 页面中添加它)

最佳答案

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

你需要添加

`font-weight:900`

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

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

regular图标版本，默认定义 font-weight , 是 PRO 所以它会显示一个空方 block 。你需要的是 solid版本:

https://fontawesome.com/icons/film?style=solid

为什么其他图标有效？

因为 \f007这个图标是:https://fontawesome.com/icons/user?style=regular如您所见，regular一个不是 PRO，包含在免费包中，因此您无需指定 font-weight .只有当你想显示 solid 时才需要指定它版本。

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

作为旁注，所有 light和 duotone版本包含在 Pro 包中，因此无论 font-weight 总是显示空方 block 用过

您可以查看文档以获取更多详细信息:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

html - 伪元素上的 Font Awesome 5 显示正方形而不是图标

`font-weight:900`

上一篇：javascript - Bootstrap 中的轮播

下一篇：javascript - CSS |固定位置不适用于 IE11