FontAwesome - 在CSS伪元素中选择正确的font-family

Question

我正在使用font-awesome版本"Font Awesome Free 5.0.6".我目前很困惑使用CSS伪元素中的图标.有4种字体家庭为fontawesome: ,Font Awesome 5 Free,,Font Awesome 5 SolidFont Awesome 5 BrandsFont Awesome 5 Regular

这是HTML:

<h1>Hello</h1>

情况1

我用这个图标:https://fontawesome.com/icons/twitter？style = brands

如你所见,它是一个brands图标,所以font-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图标,所以font-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;
}

不工作!

我做错了什么？

我们怎么知道何时使用正确的字体系列？

Answer 1

只需在所有这些中使用它们font-family,您的浏览器就可以完成这项工作.如果它没有在第一个中找到它,它将使用第二个.(Font-Family属性中有多种字体？)

顺便说一下,正确font-family的Free不是Solid因为Solid和Regular之间的区别是font-weight两者都有相同的font-family.所以没有 Solid和Regular在字体系列中,只有Free和Brands.

您可能还注意到,几乎所有Solid版本的图标都是免费的,但并非所有regular版本都是免费的.其中一些包含在PRO包中.因此,如果图标没有显示,则不一定是个font-family问题.

所有Light版本都是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>