javascript - 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 没有添加到使用 font awesome 生成的 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 添加到伪元素:

Set Pseudo Elements’ display to none

Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.^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>