我现在对在CSS伪元素中使用图标感到困惑。字库有四种:Font Awesome 5 Free
、Font Awesome 5 Solid
、Font Awesome 5 Brands
、Font Awesome 5 Regular
下面是HTML:
<h1>Hello</h1>
案例1
我使用这个图标:https://fontawesome.com/icons/twitter?style=brands
如你所见,它是一个字体图标,所以brands
-family:Font Awesome 5 Brands
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f099"; /* TWITTER ICON */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
它起作用了!
案例2
我使用这个图标:https://fontawesome.com/icons/phone?style=solid
如你所见,它是一个字体图标,所以solid
-family:Font Awesome 5 Solid
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f095"; /* PHONE ICON */
font-family: "Font Awesome 5 Solid";
font-weight: 900;
}
不起作用!
我做错什么了?
我们如何知道何时使用正确的字体系列?
发布于 2018-06-04 20:06:21
只需在同一个font-family
中使用它们,浏览器就可以完成这项工作。如果它在第一个中找不到它,它将使用第二个。(Multiple fonts in Font-Family property?)
顺便说一句,正确的font-family
是Free
而不是Solid
,因为Solid和Regular之间的区别是font-weight
,并且两者具有相同的font-family
。字体家族中没有 Solid
和Regular
,只有Free
和Brands
。
你可能还注意到,几乎所有Solid
版本的图标都是免费的,但并非所有的regular
版本都是免费的。其中一些包含在PRO包中。如果图标没有显示,则不一定是a font-family
问题。
所有的Light
和duotone
版本都是PRO版本。
.icon {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}
.icon1:before {
content: "\f099";
/* TWITTER ICON */
font-weight: 400;
}
.icon2:before {
content: "\f095";
/* PHONE ICON */
font-weight: 900;
}
.icon3:before {
content: "\f095";
/* PHONE ICON */
font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>
<div class="icon3 icon"></div>
参考:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
与font-weight
问题相关的问题:Font Awesome 5 on pseudo elements shows square instead of icon
https://stackoverflow.com/questions/50680160
复制相似问题