由于某种原因未显示 Font Awesome 图标

Question

我正在尝试将字体 Awesome 图标用作伪元素，内容为属性，这样就不需要导入他们的整个库了。

输出显示一个方框而不是实际的图标。我想我在这里遗漏了一些东西

<div>
<span class="icon"></span>Text After icon
</div>

.icon::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
  font-size: 30px;
}

Answer 1

我已经通过添加很棒的字体修复了你的代码，请试试这个：

<div>
<span class="icon"></span>Text After icon
</div>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">

由于某种原因未显示 Font Awesome 图标

Font Awesome icon not showing up for some reason

html

css

fonts

font-awesome