Targeting Font Awesome 5 SVG伪元素

Question

我正在使用令人敬畏的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没有指定任何样式吗？为什么不接管样式？

根据他们的docs，他们说要像这样添加它，并加上您所有的样式

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

为什么这些样式不沿用？

Answer 1

在JS版本中使用伪元素技术时，Font Awesome将仅使用与图标相关的属性来生成SVG（内容，字体系列，字体粗细等），伪元素将变为无用。如果查看文档，则会发现您需要向伪元素中添加display:none：

  

将伪元素的显示设置为无

     

由于我们的JS将找到每个图标引用（使用您的伪元素样式），并将图标自动插入到页面的DOM中，因此我们将隐藏真正的CSS创建的伪代码呈现的元素。 ^ref

如果您需要应用诸如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>