Font Awesome 5-在CSS伪元素中选择正确的字体系列

Question

我目前对在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;

}

有用！

情况二

我使用以下图标：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;

}

不工作！

我做错了什么？

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