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>

Font Awesome 5，如何设置svg伪元素的样式？

Font Awesome 5, how to style svg pseudo element?

javascript

css

pseudo-element

font-awesome

font-awesome-5