Font awesome 5 on pseudo elements
Font AwesomeFont Awesome-5Font Awesome Problem Overview
In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.
Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements
I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS
Font Awesome Solutions
Solution 1 - Font Awesome
Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not "□□□" instead).
font-weight has to be:
400forRegularandBrandssymbols900forSolidsymbols300forLightsymbols
I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is:
@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */
/* ... */
.class:before {
/* >> Symbol you want to use: */
content: "\f16c";
/* >> Name of the FA free font (mandatory), e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
- 'Font Awesome 5 Brand' for Brands symbols. */
font-family: 'Font Awesome 5 Free';
/* >> Weight of the font (mandatory):
- 400 for Regular and Brands symbols;
- 900 for Solid symbols;
- 300 for Light symbols. */
font-weight: 900;
/* >> Optional styling: */
display: inline-block;
/* ... */
}
Solution 2 - Font Awesome
You need to enable it (it's disabled by default).
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Css:
.class:before{
display: none;
content: "\f16c";
font-family: "Font Awesome 5 Brands";
}
Other types: Font Awesome 5 + Solid or Regular or Light or Brands
Solution 3 - Font Awesome
I think its working fine just like this:
.class:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
Solution 4 - Font Awesome
I got 5 to work using
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
in <head> and
:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "\f167";
}
in my css
Solution 5 - Font Awesome
Font Awesome 5, all top answers not working in my case as I am using the free version. The correct answer for this is in this question. check your font type (free or pro) then follow:
Free
font-family: "Font Awesome 5 Free"
Pro
font-family: "Font Awesome 5 Pro"
Brands
font-family: "Font Awesome 5 Brands"
Don't forget that I just used the link tag with path to my CSS file in HTML. No enabling required also didn't import the all.css file to my css file. Now it is working!
Solution 6 - Font Awesome
Use this Link ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css
CSS
ul li{
list-style-type: none;
position: relative;
}
ul li:before{
position: absolute;
color:#ff0000;
top:0;
left:-30px;
font-family: 'Font Awesome 5 Free';
font-size:1.2em;
content: "\f105";
font-weight: 900; /* <-- add this or 400 for other styles */
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
Solution 7 - Font Awesome
My problem disappear when i set this value: font-weight: 900;
Solution 8 - Font Awesome
Should you be using Fort Awesome to serve your icons then you need to add font-family: <my-kit-name>, no need to use font-weight: 400/900.
For more info see this link:
https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a