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页面用图标更改跨度的内容。

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

Answer 1

您需要为此指定font-weight:900（或大于600，bold或bolder的任何值）。

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Movies</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.8.1/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>

作为旁注，所有light版本都是PRO，因此免费软件包中没有font-weight版本。

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

字体真棒5 - 为什么它不使用伪元素？（显示空白方块）

1 个答案:

字体真棒5 - 为什么它不使用伪元素？ （显示空白方块）

1 个答案:

字体真棒5 - 为什么它不使用伪元素？（显示空白方块）