Search code examples
javascriptcssfont-awesomepseudo-elementfont-awesome-5

Font Awesome 5, how to style svg pseudo element?

I'm using font awesome 5 pseudo elements to attach an :after tag to my element like this

&:after {
    content: "\f068";
    font-weight:400;
    color:$brandRed;
    float:right;
    font-family: "Font Awesome 5 Pro"; 
}

Which is adding the content in fine, but the styling that I add, specifically float:right is not added to the SVG that is generated with font awesome?

Dom Screenshot

As shown in the image above, the SVG element is loaded correctly, but the :after tag has the float:right styling on it, and the SVG does not have any of the styling specified? Why is it not taking over the styling?

According to their docs, they say to add it like this, with all of your stylings

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

Why are the stylings not carrying over?

Solution

  • When using the pseudo-element technique with the JS version, Font Awesome will use only the properties related to the icon to generate the SVG (content,font-family, font-weight, etc) and the pseudo-element will become useless. If you check the the documentation you will find that you need to add display:none to the pseudo element:

    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

    If you need to apply properties like float you need to apply them to the generated SVG not the pseudo element. So simply target the 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>