如何使用Font Awesome 5:之后/:之前使用SVG Javascript？

Question

我试图使用通常的:经过技术与字体真棒专业5.

.thumb-player:after{
    content:'\f144';
    font-family: 'Font Awesome\ 5 Pro';
    position: absolute;
    width: 10px;
    height: 10px;
}

我通过脚本加载它:fontawesome-all.min.js

似乎无法让它发挥作用.一个工作的例子将不胜感激.

Answer 1

根据Font Awesome文档,如果您通过JavaScript加载图标,默认情况下会禁用CSS伪元素.

由于搜索伪元素需要DOM查询,这可能会降低不需要它们的人的性能,因此默认情况下会禁用它们.

他们建议做的是通过将以下内容添加到页面来设置Font Awesome配置以查找CSS伪元素.

订单很重要

确保在浏览器加载主库之前配置Font Awesome.

<!-- This code comes first -->
<!-- Enable searching for pseudo elements -->
<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>
<!-- Load Font Awesome SVG with JS -->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>

这样做是允许JavaScript文件查找Pseudo元素并相应地更改图标.