直接在CSS中使用时，Font Awesome显示正方形而不是图标 [英] Font Awesome shows square instead of icon when used directly in CSS
问题描述
1）我试图用CSS图标直接改变一个跨度的内容，但似乎无法正常工作。我从文档和< head>
$ p $
< link rel =stylesheethref =https://use.fontawesome.com/releases/v5.0.9/css/all.cssintegrity =sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1crossorigin =anonymous>
2）我的html看起来像这样：
< span class ='myClass'>电影< / span>
3）现在让我们说我想直接从图标中改变图标的内容CSS页面。
我的css目前看起来像这样，但它不起作用，它给了我一个方形图标。
.myClass {
visibility：hidden;
}
.myClass :: after {
font-family：'Font Awesome 5 Free';
内容：'\f008';
可见性：可见;
}
有趣的是，它看起来像是在处理一些图标。如果我使用内容进行测试：'\f007'; 它可以工作。任何想法为什么？
（如果您想知道为什么我想直接在CSS中更改图标，那是因为我正在使用媒体查询，因此我无法添加它直接在HTML页面中）
您需要指定 font-weight：900 （或大于 600 ，粗体或 bolder ）。
.myClass {visibility：hidden ;}。myClass :: after {font-family：'Font Awesome 5 Free';内容：\f008;可见度：可见的;字体重量：900; }
< link rel =stylesheethref = https://use.fontawesome.com/releases/v5.0.9/css/all.cssintegrity =sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1crossorigin =anonymous>< span class ='myClass'>电影< / span> ;
因为常规一个是PRO，你需要固体一个：
为什么其他图标正常工作？
因为 \f007 是这个图标： https://fontawesome.com/icons/user?style=regular ，你可以看到，常规一个不是PRO，所以你不用不需要指定 font-weight 。您只需要在显示 solid 一个时显示它。
.myClass {visibility：hidden;}。myClass :: after {font-family：'Font Awesome 5 Free';内容：\f007;可见度：可见的;字体重量：900; } .myClass-1 :: after {font-family：'Font Awesome 5 Free';内容：\f007; visibility：visible;}
< link rel =stylesheet href =https://use.fontawesome.com/releases/v5.0.9/css/all.cssintegrity =sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1crossorigin =anonymous>< span class ='myClass'> < / span>< span class ='myClass-1'>< / span>
$ b
请注意，所有 light 版本都是PRO，所以没有 font-weight 在免费包中。
I am trying to change the content of a span with a FA 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 {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}
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)
You need to specify font-weight:900 (or any value bigger than 600, bold or bolder) for this one.
.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.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<span class='myClass'>Movies</span>
Because the regular one is PRO and you need the solid one:
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 so you don't need to specify a font-weight. You only need to specify it when you want to show solid one.
.myClass {
visibility:hidden;
}
.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.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<span class='myClass'></span>
<span class='myClass-1'></span>
As a side note, all the light version are PRO so there is no font-weight for them in the free package.
这篇关于直接在CSS中使用时，Font Awesome显示正方形而不是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
