在 ::before 和 ::after 伪元素中加载超棒的字体图标

Question

我无法从伪元素中的 font awesome 加载图标。我尝试按照文档进行操作，但没有用。

.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

我认为您还没有在 html 中安装 fontawesome 套件。请转到 here 并输入您的电子邮件地址。他们将发送一封验证电子邮件，然后您将被提供给 link，在那里您可以找到他们提供的 <script> 标签。将其复制并粘贴到您的 html 文件中。

Answer 2

好的，这个问题真的很容易解决：

First thing you have to create a span tag between the
tags:

更正：不需要 span 标签。

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

你还需要记住的另一件事是在你的 HTML 文件中使用 link 字体真棒 link:

<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 标签来使用 font-Awesome，可能您的代码中唯一缺少的是来自 font-awesome 的 link。

Answer 3

将超棒的字体样式表添加到您的代码中，它将加载图标。

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

您或许应该探索一下 this article

有时候问题很简单::before vs :before

我建议您尝试使用 :before。其他一切都表明您的代码应该可以正常工作。

在 ::before 和 ::after 伪元素中加载超棒的字体图标

load font-awesome icon in ::before and ::after pseudo element

html

css

pseudo-class