Font Awesome 5 Choosing the correct font-family in pseudo-elements
Simply use all of them in the same font-family
and the browser will do the job. If it doesn't find it in the first one, it will use the second one. (Multiple fonts in Font-Family property?)
By the way, the correct font-family
is Free
not Solid
because the difference between Solid and Regular is the font-weight
and both have the same font-family
. There is no Solid
and Regular
in font-family, only Free
and Brands
.
You may also notice that almost all the Solid
version of the icons are free BUT not all the regular
version are free. Some of them are included in the PRO package. If an icon is not showing it's not necessarely a font-family
issue.
All the Light
and duotone
version are PRO ones.
.icon { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";}
.icon1:before { content: "\f099"; /* TWITTER ICON */ font-weight: 400;}
.icon2:before { content: "\f095"; /* PHONE ICON */ font-weight: 900;}
.icon3:before { content: "\f095"; /* PHONE ICON */ font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<div class="icon1 icon"></div><div class="icon2 icon"></div><br>
<div class="icon3 icon"></div>
Font Awesome 5 icon not rendering in :before element on Chrome
Your jsfiddle has incorrect font-family
specified.
The correct one is Font Awesome 5 Free
(for the CDN font link you used).
Also you have to set font-weight: 900
to have bold squares.
ul li { list-style: none;}
ul li:before { margin-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f0c8'; color: #c00; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
As a list bullet (li:before) Firefox (v74) shows correct full square icon, Chrome (v80) shows an outlined square like missing character.
<ul><li>Bullet 1</li><li>Bullet 2</li></ul>
Inserted as 'normal' <i> element, the icon shows in both browsers: <i class="fas fa-square"></i>
Font Awesome in CSS pseudo elements not showing
The Font family should specify Free
.
Also note that for solid icons you would have to use font-weight:900
a[data-toggle="collapse"] { position: relative;}
a[aria-expanded="false"]::before,a[aria-expanded="true"]::before { font-family: "Font Awesome 5 Free"; content: "\f106"; font-weight: 900; display: block; position: absolute; right: 20px; font-size: 0.6em;}
a[aria-expanded="true"]::before { font-family: "Font Awesome 5 Solid"; content: "\f106";}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><div class="wrapper"> <nav id="sidebar"> <li class="active"> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"> <i class="far fa-file-alt"></i> Pages </a> </li> </nav></div>
The before pseudo element not working in Font awesome v.5
UPDATE 3:
The font-family
is wrong.
use font-family: "Font Awesome 5 Brands"
And maybe you have to set a font-weight
see documentation
UPDATE 2: TL;DR
The font-family
is wrong.
use font-family: "Font Awesome 5 Brands"
For Font Awesome 5 this must be one of the following:
Updated because you use css webfonts:
For method Web Fonts with CSS
Free
font-family: "Font Awesome 5 Free"
Pro
font-family: "Font Awesome 5 Pro"
Brands => use this!
font-family: "Font Awesome 5 Brands"
See here:
https://jsfiddle.net/nwodoo32/1/
For method SVG with Javascript
Solid
font-family: "Font Awesome 5 Solid"
Regular
font-family: "Font Awesome 5 Regular"
Brands
font-family: "Font Awesome 5 Brands"
Light (Pro)
font-family: "Font Awesome 5 Light"
Font Awesome 5, how to style svg pseudo element?
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>
Font awesome 4/5 icons are show up correct
Use Brands
instead of Free
To set them in one line(as in image) use display:flex;
.xcon-facebook:before { content: '\f09a'; font-family: 'Font Awesome 5 Brands'; }.xcon-twitter:before { content: '\f099'; font-family: 'Font Awesome 5 Brands'; } .xcon-linkedin:before { content: '\f0e1'; font-family: 'Font Awesome 5 Brands'; }.xcon-instagram:before { content: '\f16d'; font-family: 'Font Awesome 5 Brands'; } .xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Brands'; } ul{display:flex; list-style: none;}li{padding:5px;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><ul> <li><a href="#"><i class="xcon-facebook"></i></a></li> <li><a href="#"><i class="xcon-twitter"></i></a></li> <li><a href="#"><i class="xcon-linkedin"></i></a></li> <li><a href="#"><i class="xcon-instagram"></i></a></li> <li><a href="#"><i class="xcon-stackoverflow"></i></a></li></ul>
Related Topics
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
How Are the Points in CSS Specificity Calculated
Using Percentage Values With Background-Position on a Linear-Gradient
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Why Does Height 100% Work When Doctype Is Removed
How to Style Html5 Range Input to Have Different Color Before and After Slider
Advantages of Using Display:Inline-Block VS Float:Left in Css
Margin-Top Not Working For Span Element
How to Make an Svg Scale With Its Parent Container
Font Scaling Based on Width of Container
Media Queries: How to Target Desktop, Tablet, and Mobile
React.Js Inline Style Best Practices
How to Hover Over One Element and Affect a Different Element