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

Question

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

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页面中直接添加它)

Answer 1

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

您需要添加

`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>

默认 font-weight 定义的 regular 版本的图标是 PRO，因此它将显示一个空方块。你需要的是 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 使用什么

，都会始终显示空方块

您可以查看文档了解更多详情：https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

相关问题

Answer 2

来自您的评论：

Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?

测试 text-stroke 使用透明颜色以获得更薄的渲染：

.myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}

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

Answer 3

list-style-image: url("../../media/examples/rocket.svg");

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

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

Font Awesome 5 on pseudo elements shows square instead of icon

html

css

pseudo-element

font-awesome

font-awesome-5

`font-weight:900`