时间戳

首页 > 解决方案 > 字体真棒图标未显示 css 内容属性

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

问题描述

我正在尝试让 Font Awesome 图标显示在我的布局中，到目前为止只有圆形播放图标显示，我查看了Font Awesome 图标没有显示，但这是字体真棒类，我正在使用 cssContent属性所以我可以用 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>

这是有原因的吗，就像我做错了什么？如果你想看整个项目：去这里

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

标签： cssfont-awesome

解决方案

FontAwesome 会根据font-weight属性显示不同的图标，免费版本中默认不提供\f04a和图标。但是，您仍然可以使用 a of的图标。例子：\f04efont-weight400font-weight600

.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>

推荐阅读