css - Font Awesome 5 字体系列问题

Question

我在带有 bootstrap 4 的元素中集成了 Font Awesome 5。当我通过 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'

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;，font awesome 5 中的一些图标无法工作。

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