如何使用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元素並相應地更改圖標。

Answer 2

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

如果您嘗試使用:after或:before寬度SVG元素:before ，如<text> ，那么您運氣不好。 :after和:before的SVG不支持。 它們只是HTML。