我正在尝试在 css 伪元素中使用字体真棒图标，但它不起作用我的代码有什么问题？答案

【问题标题】：I'm trying to use font awesome icon in css pseudo element but it's not working what is wrong with my code?我正在尝试在 css 伪元素中使用字体真棒图标，但它不起作用我的代码有什么问题？
【发布时间】：2022-01-17 05:03:37
【问题描述】：

<html>
<head>

  <style>
h1::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f5fc";
}
  </style>
</head>

<body>
  <h1>Heading</h1>
</body>
</html>

这段代码有什么问题吗？我已经多次更改字体粗细，但它一直显示那个空心框

【问题讨论】：

尝试使用 font awesome 版本 4。我想它会解决你的问题。
创建您的第一个工具包并将其粘贴到标题标签。 fontawesome.com/start

标签： css pseudo-element

【解决方案1】：

我通过在您的<head> 中导入 Font Awesome CDN 链接解决了这个问题。这些奇怪的是不起作用。

<head>
<!-- Doesn't work -->
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>

使用 Font Awesome Webfont with CDN 解决了这个问题。

检查sn-p。

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<style>
    h1::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5fc";
    }
</style>
</head>

<body>
    <h1>Heading</h1>
</body>

</html>

【讨论】：

【解决方案2】：

h1 {
    position: relative;
    padding-left: 35px;
}

h1::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5fc";
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: 10px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<h1>Heading</h1>

【讨论】：

对我不起作用。
现在你为什么要偷我的解决方案
它有效，我已经添加了 fontwsome 链接。
对，因为您复制了我在回答中添加到头部的链接关系...另外，对您的定位感到困惑，他使用::after 在@987654324 之后显示图标@ 那么为什么要把它放在<h1> 之前呢？如果这是他想要的，我想他会使用::before。
我没有偷窃，也没有复制任何东西。我做了 22 年的高级前端，你的问题很基础。