时间戳

首页 > 解决方案 > Font Awesome 图标由于某种原因未显示

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

问题描述

我正在尝试将字体 Awesome 图标用作具有 content 属性的伪元素，这样就不需要导入它们的整个库。

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

<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;
}

标签： htmlcssfontsfont-awesome

解决方案

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

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

推荐阅读