Javascript 字体5虚拟元素与网页

我已经为此奋斗太久了，不知道自己哪里出了问题

我正在尝试在我的网页项目中使用fontawesome 5。我已经能够在HTML中使用图标，但如果我尝试使用伪选择器，它只会返回空方块。阅读大量的文章和文档，但似乎什么都不管用。请帮忙，谢谢

npm安装@fortwome/fontwome免费

index.js

导入“引导”
导入“@fortawesome/fontawesome free/js/all.js”
导入“../scss/main.scss”
window.FontAwesomeConfig={
搜索伪元素：true
}

main.scss

///引导///
//--必须
@导入“~bootstrap/scss/functions”；
@导入“~bootstrap/scss/variables”；
@导入“~bootstrap/scss/mixin”；
//--可选
@导入“~bootstrap/scss/buttons”；
@导入“~bootstrap/scss/code”；
@导入“~bootstrap/scss/forms”；
@导入“~bootstrap/scss/grid”；
@导入“~bootstrap/scss/images”；
@导入“~bootstrap/scss/modal”；
@导入“~bootstrap/scss/reboot”；
@导入“~bootstrap/scss/type”；
@导入“~bootstrap/scss/transitions”；
@导入“~bootstrap/scss/mixins/breakpoints”；
///模块///
@导入“模块/颜色”；
@导入“模块/尺寸”；
@导入“模块/字体”；
@导入“模块/转换”；
///部分文件///
@输入“partials/jumbotron”；
///供应商文件///
@导入“供应商/重置”；

SCSS文件\u jumbotron.SCSS

.products{
背景：红色；
.产品项目{
.产品项目标题{
.产品项目名称{
a{
填充：尺寸基准；
显示：块；
颜色：$白色；
文本对齐：居中；
&：之前{
字体系列：“字体酷炫5品牌”，“字体酷炫5免费”；
显示：块；
内容：“\f095”；
字号：900；
字体大小：20px；
颜色：$白色；
}
}
}
}

HTML

网页包配置

const path=require（'path'））
const webpack=require（'webpack'）
const HtmlWebPackPlugin=require（'html-webpack-plugin'）
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）
const CopyWebpackPlugin=require（'copy-webpack-plugin'）
//const devMode=process.env.NODE_env！=“生产”
module.exports={
条目：{main:'./src/js/index.js'}，
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：“js/[name].js”
},
模块：{
规则：[
{
使用：{
加载器：'babel-loader'，
选项：{预设：['es2015']}
},
测试：/\.js$/,，
排除：/node\u模块/
},
{
测试：/\（sa|sc|c）ss$/，
使用：[
“样式加载器”，
MiniCssExtractPlugin.loader，
“css加载程序”，
“sass loader”
]
},
{
测试：/\（gif | png | jp（e*）g | svg）$/，
使用：[{
加载器：“url加载器”，
选项：{
限制：1000000，//将小于1mb的图像转换为基本64个字符串
名称：'images/[name].[ext]'
}
}] 
},
{
测试：/（ttf | otf | eot | svg | woff（2）？（\？[a-z0-9]+）？$/，
使用：[{
加载器：“文件加载器”，
选项：{
名称：'fonts/[name].[ext]'，
公共路径：“../”
}
}]
}
]
},
开发服务器：{
contentBase:“./dist”
},
插件：[
新HtmlWebPackPlugin({
注：错，
哈什：没错，
模板：'./src/index.html'，
文件名：“index.html”
}),
新的MinicsSextract插件({
文件名：“css/style.css”，
chunkFilename:'css/style.css'
}),
新的CopyWebpackPlugin([
{
发件人：“./src/images”，
致：“图像”
}
]),
新的webpack.ProvidePlugin({
$：“jquery”，
jQuery:'jQuery'，
'window.jQuery'：'jQuery'，
Popper:['Popper.js'，'default']
})
]
}

试试看

.要素：之前{
内容：“\f000”；
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文字装饰：继承；
颜色：#000；
字号：18px；
右侧填充：0.5em；
位置：绝对位置；
顶部：10px；
左：0；
}

---

在svg核心配置对象中将

searchPseudoElements

设置为

true

。 并验证字体族和内容属性的值是否正确

摘自文件：

通过将searchPseudoElements启用为true（默认为false），您可以 可以让Font Awesome在DOM中搜索具有以下内容的任何元素：

字体匹配字体系列

内容属性

有效的字体系列值包括：字体真棒5纯色、字体真棒5普通、字体真棒>5浅色和字体真棒5品牌。

font-family: 'Font Awesome\ 5 Free';

<style>
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}