Font Awesome 5 字体系列问题

Question

我将 Font Awesome 5 与 bootstrap 4 集成到一个项目中。当我通过 CSS 调用字体时，它不起作用。使用 Font Awesome 4 的代码如下：

 #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  float: right;
  content: "\f107";
  font-family: "FontAwesome";
}

我试图更改字体名称，但它不起作用

font-family: 'Font Awesome 5 Free'

原文由 Carmelo Valenti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的 Unicode 是错误的 f107

 a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}

 <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

或者在其他情况下， font-weight: 900; 会救你。没有 font-weight: 900; 字体真棒 5 中的一些图标无法工作。

 a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

原文由 Pedram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

奇怪的是，您必须将“ font-weight: 900 ”放在某些图标中，以便显示它们。

 #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900; /* Fix version 5.0.9 */
}

原文由 Lenin Zapata 发布，翻译遵循 CC BY-SA 3.0 许可协议