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

1）我已经从文档中导入了FA <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页面使用图标更改范围的内容。

我的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页面中）

评论

这是什么图标代码？
@TemaniAfif这是电影图标
您可以在真棒字体网站中共享它的链接吗...所以我们验证它属于哪个程序包
他在他的第一个嵌入式部分中做到了。
@Roberrrt我的意思是图标的链接;）不是Font Awesome lib

#1 楼

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




图标的regular版本由默认font-weight定义为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


相关问题
使用JS + SVG版本时，Font Awesome 5显示空白方块
Font Awesome 5 Unicode
Font Awesome 5，为什么CSS内容未显示？

评论

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

–nsayer
18年4月10日在13:47
@nsayer所有指示灯图标均为PRO，因此免费包装中没有它们的字体粗细;）仅当您获得PRO时，才可以使用它们

– Temani Afif
18-4-10在13:50