Question

我正在尝试使用通常的方法：使用字体awesome pro 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 documentation，如果您通过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元素并相应地更改图标。

Answer 2

什么类型的元素是.thumb-player？

如果您尝试使用:after或:before宽度的SVG元素，例如<text>，那么您运气不佳。 SVG不支持:after和:before。它们只是HTML。

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

2 个答案: