我正在尝试在 css 伪元素中使用字体真棒图标，但它不起作用我的代码有啥问题？
Posted
技术标签:
【中文标题】我正在尝试在 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 【参考方案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 年的高级前端，你的问题很基础。以上是关于我正在尝试在 css 伪元素中使用字体真棒图标，但它不起作用我的代码有啥问题？的主要内容，如果未能解决你的问题，请参考以下文章
单击时更改字体真棒图标的颜色：CSS / JavaScript