Question

我目前在使用CSS伪元素中的图标感到困惑。 fontawesome有4种字体系列：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图标，所以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;
}

IT工作！

<案例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;
}

不工作！

我做错了什么？

我们如何知道何时使用正确的font-family？

Answer 1

只需在同一font-family中使用所有这些内容，您的浏览器就可以完成这项工作。如果它没有在第一个中找到它，它将使用第二个。（Multiple fonts in Font-Family property?）

顺便说一下，正确的font-family是Free而非Solid，因为 Solid 和 Regular 之间的差异是{ {1}}并且两者都具有相同的font-weight。因此在font-family中没有 font-family和Solid，只有Regular和Free。

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

所有font-family版本都是PRO版本。

Light

.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*/
}

Font Awesome 5 - 在CSS伪元素中选择正确的font-family

1 个答案: