29

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

1) 我已经从文档和<head>

<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 页面中添加它）

4

3 回答 3

59

如果您使用的是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，因此它将显示一个空方块。您需要的是solid版本：

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

CSS fontawesome 5 伪元素字体粗细

为什么另一个图标工作？

因为\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附带说明一下，所有版本都包含在 Pro 包中，因此无论使用duotone什么都将始终显示空白方块font-weight

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

Font Awesome 5 - 伪元素

相关问题

Font Awesome 5 使用 JS+SVG 版本时显示空方块

字体真棒5 unicode

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

于 2018-04-10T13:36:03.253 回答
1

从您的评论中：

太棒了，谢谢解释！如果精简版是免费的，你知道我需要使用什么字体粗细吗？

用透明颜色测试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>

于 2021-11-12T19:55:49.060 回答
-1 
list-style-image: url("../../media/examples/rocket.svg");

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

于 2022-02-06T17:31:00.933 回答