Font Awesome 5, Why Is CSS Content Not Showing

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;
}

enter image description here

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



Leave a reply



Submit