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

大佬教程收集整理的这篇文章主要介绍了Font Awesome 5在伪元素中选择正确的字体系列，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Font Awesome 5在伪元素中选择正确的字体系列？

只需将它们全部使用在同一位置Font-family，您的浏览器即可完成工作。如果它在第一个中找不到，它将使用第二个。（Font-Family属性中有多种字体？）

顺便说一句，正确的Font-family方法Free不是SolID因为SolID和Regular之间的差异是Font-weight和两者都相同Font-family。在Font-family中没有 SolID and Regular，只有Freeand Brands。

您可能还会注意到，SolID图标的几乎所有版本都是免费的，但并非所有regular版本都是免费的。其中一些包含在PRO软件包中。如果没有显示图标，则不一定是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>

解决方法

<h1>Hello</h1>

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

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 Awesome 5在伪元素中选择正确的字体系列全部内容，希望文章能够帮你解决Font Awesome 5在伪元素中选择正确的字体系列所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。