字体真棒图标未显示css内容属性[重复]

Question

我正在尝试让 Font Awesome 图标显示在我的布局中，到目前为止只有圆形播放图标显示，我查看了 Font Awesome icons not showing 但这是字体很棒的类，我正在使用 css @ 987654323@ 属性，所以我可以用 javascript 更改图标，但有些图标不显示，就像在这里看到的那样

.button {
  font-family: "Font Awesome 5 Free";
  width: 30px;
  display: inline-block;
  font-size: 28px;
  color: black;
  border: solid black;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
.controls.main .play-pause::before {
  content: "\f144";
}

.controls.main .prev::before {
  content: "\f04a";
}

.controls.main .next::before {
  content: "\f04e";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
 </div>

这是有原因的，比如我做错了什么？如果你想看整个项目：go here

（顺便说一句，有人知道任何很酷的动画播放暂停按钮吗？我只是好奇）

Answer 1

FontAwesome 会根据font-weight 属性显示不同的图标，而在免费版本中400 的默认font-weight 和\f04a 和\f04e 图标不可用。但是，您仍然可以使用 font-weight 或 600 的图标。示例：

.button {
  font-family: "Font Awesome 5 Free";
  width: 30px;
  display: inline-block;
  font-size: 28px;
  color: black;
  border: solid black;
  cursor: pointer;
}
.controls.main .play-pause::before {
  content: "\f144";
}

.controls.main .prev::before {
  content: "\f04a";
  font-weight: 600;
}

.controls.main .next::before {
  content: "\f04e";
  font-weight: 600;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
 </div>