尝试用 Font Awesome 图标替换列表项标签上的项目符号类型，但我得到一个空方块：
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
我知道字体库正在加载，因为我能够使用<i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>并且字体渲染正确（尽管样式不正确）。
If you are using the CSS version read this: Font Awesome 5, why css content is not showing? https://stackoverflow.com/q/49690006/8620333
使用 Font Awesome 5 的最新版本，您可以通过添加以下内容来启用 JS 版本的伪元素的使用data-search-pseudo-elements像下面这样：
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
您可以检查文档 https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js更多细节 ：
如果您使用我们的 SVG + JS 框架来渲染图标，您需要做一些额外的事情：
启用伪元素
使用我们的 SVG + JS 框架时，默认情况下禁用使用 CSS 伪元素渲染图标。您需要添加<script data-search-pseudo-elements ... >归因于<script />调用 Font Awesome 的元素。
将伪元素的显示设置为无
由于我们的 JS 会找到每个图标引用（使用伪元素样式）并自动将图标插入页面的 DOM 中，因此我们需要隐藏渲染的真实 CSS 创建的伪元素。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
