Font Awesome在CSS中直接使用时显示正方形而不是图标
nsa*_*yer 20 html css pseudo-element font-awesome font-awesome-5
我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
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页面用图标更改跨度的内容.
我的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页面中添加它)
Tem*_*fif 30
你需要指定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
