Font Awesome 5，如何設置 svg 偽元素的樣式？

Question

我正在使用 font awesome 5 偽元素將:after標簽附加到我的元素上，如下所示

&:after {
    content: "\f068";
    font-weight:400;
    color:$brandRed;
    float:right;
    font-family: "Font Awesome 5 Pro"; 
}

哪個添加內容很好，但是我添加的樣式，特別是float:right沒有添加到用字體真棒生成的 SVG 中？

如上圖所示，SVG 元素已正確加載，但:after標簽上有float:right樣式，而 SVG 沒有指定任何樣式？ 為什么它不接管樣式？

根據他們的文檔，他們說要像這樣添加所有樣式

.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

為什么樣式沒有延續？

Answer 1

在 JS 版本中使用偽元素技術時，Font Awesome 將僅使用與圖標相關的屬性來生成 SVG（內容、字體系列、字體粗細等），而偽元素將變得無用。 如果您查看文檔，您會發現需要將display:none添加到偽元素中：

將偽元素的顯示設置為無

由於我們的 JS 會找到每個圖標引用（使用您的偽元素樣式）並自動將一個圖標插入到您頁面的 DOM 中，因此我們需要隱藏呈現的真實 CSS 創建的偽元素。 ^參考

如果您需要應用像float這樣的屬性，您需要將它們應用到生成的 SVG 而不是偽元素。 因此，只需定位 SVG：

 span:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\\f007"; /*display:none; I commented this mandatory property to see what is happening */ color:red; /* will do nothing*/ float:right; /* will do nothing*/ } /*target the svg for styling*/ .target-svg svg { color: blue; float:right; }

 <script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script> <span class="target-svg">the icons is on the right --></span> <br> <span>the icons will not be styled</span>