字体真棒图标未显示 css 内容属性

Question

我正在尝试让 Font Awesome 图标显示在我的布局中，但到目前为止只有圆圈播放图标显示，我查看了但这是字体很棒类，我正在使用 css Content 属性所以我可以用 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 属性显示不同的图标，\f04a 和 \f04e 图标在默认 font-weight 上不可用 400 在免费版中。但是，您仍然可以使用 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>

字体真棒图标未显示 css 内容 属性

Font Awesome Icons not showing with css Content property

css

font-awesome

字体真棒图标未显示 css 内容属性