伪元素上的Awesome 5字体显示正方形而不是图标 [英] Font Awesome 5 on pseudo elements shows square instead of icon
问题描述
我正在尝试直接从CSS页面更改带有Font Awesome图标的span的内容，但似乎无法使其正常工作.
I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.
1)我已经从文档以及<head>
1) I have imported FA from the documentation and in the <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的html看起来像这样:
2) My html looks like this :
<span class='myClass'>Movies</span>
3)现在让我们说我想直接从CSS页面使用图标更改跨度的内容.
3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
我的CSS当前看起来像这样，但是它不起作用，它给了我一个正方形而不是图标.
My css currently looks like this but it isn't working, it gives me a square instead of the icon.
.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';进行测试，则可以正常工作.知道为什么吗?
Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?
(如果您想知道为什么我要直接在CSS中更改图标，那是因为我正在使用媒体查询，所以无法直接在HTML页面中添加它)
(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)
推荐答案
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
您需要添加
.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版本:
The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:
https://fontawesome.com/icons/film?style=solid
另一个图标为什么起作用?
因为\f007是此图标: https://fontawesome.com/icons/user ?style = regular ，如您所见，regular不是PRO，而是包含在免费软件包中，因此您无需指定font-weight.您只需要在显示solid版本时指定它即可.
Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.
.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中显示空白方块.
As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used
您可以查看文档以了解更多详细信息: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
相关问题
Font Awesome 5在使用JS + SVG版本时显示为空方块
这篇关于伪元素上的Awesome 5字体显示正方形而不是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
