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>