伪元素上的 Font Awesome 5 显示方形而不是图标 [英] Font Awesome 5 on pseudo elements shows square instead of icon
问题描述
我正在尝试直接从 CSS 页面更改带有 Font Awesome 图标的 span 的内容，但似乎无法使其正常工作.
1) 我已经从文档和
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTTantk">2) 我的 html 看起来像这样:
电影3) 现在假设我想直接从 CSS 页面使用图标更改 span 的内容.
我的 css 目前看起来像这样，但它不起作用，它给了我一个正方形而不是图标.
.myClass {字体大小:25px；}.myClass::after {font-family: 'Font Awesome 5 Free';内容:'f008';}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/所有.css"><span class='myClass'></span>有趣的是，它看起来像是在使用一些图标.如果我使用 content: 'f007'; 进行测试，它会起作用.知道为什么吗?
(如果你想知道我为什么要直接在 CSS 中更改图标，那是因为我使用的是媒体查询，所以我不能直接在 HTML 页面中添加它)
如果您使用的是 JS+SVG 版本，请阅读:
为什么另一个图标有效?
因为 f007 是这个图标:
相关问题
Font Awesome 5 在使用 JS+SVG 版本时显示空方块
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) 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) My html looks like this :
<span class='myClass'>Movies</span>
3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
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>
Funny thing is that it looks like it is working with some icons. If I test with content: 'f007'; it works. Any idea why?
(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
You need to add
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>
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
Why the other icon is working?
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>
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
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Related questions
Font Awesome 5 shows empty square when using the JS+SVG version
Font Awesome 5, why is css content not showing?
这篇关于伪元素上的 Font Awesome 5 显示方形而不是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
