Font Awesome 5在伪元素上显示方块而不是图标

Question

Font Awesome 5在伪元素上显示方块而不是图标

htmlcssfont-awesomepseudo-elementfont-awesome-5

30

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

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页面更改带有图标的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 页面中添加)

- nsayer

这是什么图标的代码？ - Temani Afif

@TemaniAfif 这是一个电影图标。 - nsayer

你能分享一下它在FontAwesome网站上的链接吗？这样我们就能确认它属于哪个包了。 - Temani Afif

他在他的第一个嵌入式部分中完成了这个。 - roberrrt-s

@Roberrrt 我的意思是图标的链接，而不是 Font Awesome 库。 - Temani Afif

显示剩余2条评论

3个回答

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>

- G-Cyrillus

-1

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

源代码：https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-image

- fruitloaf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

^{如果您正在使用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>

{{默认情况下，由于字体的默认"font-weight"，图标呈现为空白方块，这是其"regular"版本}}。你需要的是{{"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版本都包含在专业版中，因此无论使用何种font-weight，始终会显示空方块。

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