伪元素上的字体真棒5显示方形而不是图标

伪元素上的字体真棒5显示方形而不是图标

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

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 {
  visibility: hidden;}.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
  visibility: visible;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"><span class='myClass'>Movies</span>

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

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


摇曳的蔷薇
浏览 600回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP