字体真棒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 没有被添加到用font awesome生成的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（content,font-family,font-weight等），而伪元素将变得毫无用处。如果你查看文档，你会发现你需要添加以下内容 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>