`::before` 和 `::after` 伪元素在样式表中不起作用

Question

我想通过 CSS 添加一个 Font Awesome 图标。我已经链接了字体的样式表和我的 style.css.

我不明白为什么我刷新页面时没有出现图标。尽管说明了字体系列、字体粗细和正确的 Unicode。

hr.camera {
  position: relative;
  padding: 0;
  text-align: center;
  border-top: 5px solid #f44336;
  max-width: 60%;
  margin: 2em auto;
}

hr.camera::after {
  content: '\f030';
  font-family: "Font Awsome 5 Free";
  font-weight: 900;
}

<div class="row">
  <div class="col-lg-12">
    <h2>My Icon</h2>
    <hr class="camera">
  </div>
</div>

Answer 1

您必须将 <hr /> 更改为 <span></span> 然后它应该可以完成工作。

<span class="camera"></span>

Answer 2

Awesome 拼写错误。字体系列："Font Awsome 5 Free"; 将其更改为 font-family: "Font Awesome 5 Free";

`::before` 和 `::after` 伪元素在样式表中不起作用

`::before` and `::after` pseudoelements do not work in the stylesheet

html

css

icons

pseudo-element

font-awesome