加载字体-令人敬畏的图标在：：前和：：后伪元素

Question

我不能在伪元素中从字体中加载图标。我试着跟踪医生，但没成功。

​

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.x::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

<p class="x">hello, my name is john</p>

​

Answer 1

添加字体-令人敬畏的样式表到您的代码，它将加载图标。

​

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.x::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>

​

Answer 2

我想你还没有在你的html中安装方框。请进入这里并输入您的电子邮件地址。他们将发送一封验证电子邮件，然后您将被提供到一个链接，您将在那里找到由他们提供的<script>标签。复制并粘贴到html文件中。

Answer 3

这个问题很容易解决：

首先，您必须在 标签：

更正:不需要span标签。

<p class="icon-classname">hello, my name is john</p>

另外，您必须记住的另一件事是使用这个链接来显示HTML文件中字体的链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>

在css文件中：

icon-classname::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

您不需要span标签来使用字体-太棒了，可能您的代码中缺少的唯一东西就是字体的链接-太棒了。