Font Awesome 5 on pseudo elements shows square instead of icon
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
You need to add
font-weight:900
.myClass {
font-size:45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
Font-Awesome displaying square instead of icon using CSS Pseudo After
(Posted on behalf of the question author, to move it from the question to the answer section).
Problem has been solved. This whole issue was due to using an outdated version of Font-Awesome. So for anyone who is running across this issue, please make sure that you are using the most current version of Font-Awesome!
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 5 shows empty square when using the JS+SVG version
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements
like below:
ul { list-style: none;}
.testitems { line-height: 2em;}
.testitems:before { font-family: "Font Awesome 5 Free"; content: "\f058"; display:none; /* We need to hide the pseudo element*/}/*target the svg for styling*/.testitems svg { color: blue; margin: 0 5px 0 -15px;}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script><ul> <li class="testitems">List Item 1</li> <li class="testitems">List Item 2</li> <li class="testitems">List Item 3</li> <li class="testitems">List Item 4</li> <li class="testitems">List Item 5</li></ul><i class="fa fa-user"></i>
Font Awesome 5 not working when adding icon through ::before
Here is the working example
.wrapper {
width: 200px;
position: relative;
}
.wrapper::before{
font-family: "Font Awesome 5 Brands";
content: "\f057";
position: absolute;
left: 0;
font-weight: 900;
font-size: 40px;
z-index: 200;
}
.wrapper::after{
font-family: "Font Awesome 5 Free";
content: "\f057";
position: absolute;
top: 5px;
right: 0;
font-weight: 900;
font-size: 40px;
z-index: 200;
}
input {
height: 50px;
width: 100%;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<div class="wrapper">
<input class="form-field" type="text">
</div>
Square icon when using fontawesome icons
In place of using this
<i class="fa fa-user"></i>
You're using this one
<i class="fas fa-user"></i>
You have to remove s from that icon.
Your giving the link font awesome 4 and using the icon from font awesome 5 that's why it's not working. if you giving the font awesome 4 links so you have to remove s from that icon or else if you don't want to remove s from that icon so you have to use font awesome 5 links.
This is the font awesome 5 link.
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-
fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
Related Topics
Do I Use ≪Img≫, ≪Object≫, or ≪Embed≫ For Svg Files
Why Does Styling the Background of the Body Element Affect the Entire Screen
Using ≪Style≫ Tags in the ≪Body≫ With Other Html
How to Add Default Value For HTML ≪Textarea≫
Add Centered Text to the Middle of a Horizontal Rule
How to Use CSS to Surround a Number With a Circle
With Ng-Bind-Html-Unsafe Removed, How to Inject Html
Should I Put Input Elements Inside a Label Element
How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera
How to Get This CSS Text-Decoration Override to Work
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)