Font Awesome 5, why is CSS content not showing?
If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version
First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Or within the CSS file:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
Then you need to correct the font-family and the content like below:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before { color:#000; content: '\f35a'; /* You should use \ and not /*/ font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/ font-style: normal; font-weight: normal; font-size:40px;}
<i class="fp-prev"></i>
Font Awesome Icons not showing with css Content property
FontAwesome displays different icons depending on the font-weight
property, and the \f04a
and \f04e
icons are not available on the default font-weight
of 400
in the free version. However, you can still use the icons using a font-weight
of 600
. Example:
.button {
font-family: "Font Awesome 5 Free";
width: 30px;
display: inline-block;
font-size: 28px;
color: black;
border: solid black;
cursor: pointer;
}
.controls.main .play-pause::before {
content: "\f144";
}
.controls.main .prev::before {
content: "\f04a";
font-weight: 600;
}
.controls.main .next::before {
content: "\f04e";
font-weight: 600;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div class="controls main">
<span class="button prev"></span>
<span class="button play-pause"></span>
<span class="button next"></span>
</div>
Font awesome icon not working as content in CSS
You have to set the font-weight
property. You can try this and it should work now:
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: red;
position: relative;
content: "\f06a";
font-weight: 900;
}
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>
Font Awesome not working, icons showing as squares
According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.
Fontawesome 5 icon not showing in normal HTML and CSS file?
Make sure you have installed Font Awesome Package which can be done using this command - npm install --save @fortawesome/fontawesome-free
or use the CDN
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
Font awesome content not showing up when defined inside sass
You need to specifiy the font-family for the :after pseudo-element and also maybe - display: block or display: inline-block to allow it to render ...
And also - since you are setting this to be position: absolute - - you will need to set its parent element to be position: relative to allow the correct positioning....
.menu-list s span {
position: relative; // added this - to allow absolute poisitioning of the icon within the span.
}
&:after {
content: "\f105",
position: absolute,
right: 30px,
transition: all 0.5s,
font-weight: 900,
font-style: normal,
font-family: FontAwesome, // added this line
display: block, // added this line
...
}
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 icons no longer working in \f content values
You're attempting to use pseudo-elements (the :before
part of your CSS selector) and setting the contents of those pseudo-elements to the unicode value indicated by \f00c
.
Pseudo-elements do still work in Font Awesome 5.1.0. You'll need to set the correct CSS properties, like font-family
and font-weight
, for those elements.
And, if you're using the SVG with JavaScript method, you'll have to configure Font Awesome to enable pseudo-element support. For the Web Fonts with CSS method, pseudo-element support is always intrinsically available.
There are several possibilities, depending on which method you're using and whether you're using Free or Pro. But here's an example of using Web Fonts with CSS, Free:
.fc .fc-toolbar .fc-prev-button .ui-icon-circle-triangle-w:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
If you're using SVG with JavaScript, make sure your <script>
tag that loads Font Awesome, includes the data-search-pseudo-elements
attribute:
<script data-search-pseudo-elements ... >
See also documentation here for how to use pseudo-elements in 5.1.0.
Related Topics
Font Awesome 5 Choosing the Correct Font-Family in Pseudo-Elements
Change Opacity on All Elements Except Hovered One
How to Vertically Center Content With Variable Height Within a Div
Does the Order of Classes Listed on an Item Affect the Css
Css Opacity Only to Background Color, Not the Text on It
Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]
Css Property Border-Color Not Working
Vertically Align Text Within a Div
How to Change the Cursor into a Hand When a User Hovers Over a List Item
Remove Blue Underline from Link
How Does Flex-Shrink Factor in Padding and Border-Box
Difference Between Normalize.Css and Reset Css