<p>I am trying to change the content of a <code>span</code> with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.</p> <p>1) I have imported FA from the documentation and in the <code><head></code></p> <pre class="prettyprint"><code><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> </code></pre> <p>2) My html looks like this : </p> <pre class="prettyprint"><code><span class='myClass'>Movies</span> </code></pre> <p>3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.</p> <p>My css currently looks like this but it isn't working, it gives me a square instead of the icon.</p> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>.myClass { font-size:25px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: '\f008'; }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"> <span class='myClass'></span></code></pre> </div> </div> <p>Funny thing is that it looks like it is working with some icons. If I test with <code>content: '\f007';</code> it works. Any idea why?</p> <p>(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)</p>

<p><sup>If you are using the <strong>JS+SVG version</strong> read this: Font Awesome 5 shows empty square when using the JS+SVG version</sup></p> <p>You need to add</p> <h3><code>font-weight:900</code></h3> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>.myClass { font-size:45px; } .myClass::after { font-family: 'Font Awesome 5 Free'; content: "\f008"; font-weight: 900; }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <span class='myClass'></span></code></pre> </div> </div> <p>The <code>regular</code> version of the icon, defined by the default <code>font-weight</code>, is PRO so it will show an empty square. What you need is the <code>solid</code> version:</p> <p>https://fontawesome.com/icons/film?style=solid</p> <p><img src="https://i.stack.imgur.com/4py0x.png" alt="CSS fontawesome 5 pseud element font weight"></p> <p><strong>Why the other icon is working?</strong></p> <p>Because the <code>\f007</code> is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the <code>regular</code> one is not PRO and is included in the free package so you don't need to specify a <code>font-weight</code>. You only need to specify it when you want to show the <code>solid</code> version.</p> <p></p> <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>.myClass::after { font-family: 'Font Awesome 5 Free'; content: "\f007"; visibility: visible; font-weight: 900; } .myClass-1::after { font-family: 'Font Awesome 5 Free'; content: "\f007"; visibility: visible; }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> <span class='myClass'>Solid </span> <br> <span class='myClass-1'>Regular </span></code></pre> </div> </div> <hr> <p>As a side note, all the <code>light</code> and <code>duotone</code> versions are included in the Pro package so will always show empty square whataver the <code>font-weight</code> used</p> <hr> <p>You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements</p> <p><img src="https://i.stack.imgur.com/UT2wV.png" alt="Font Awesome 5 - pseudo element"></p> <hr> <p>Related questions</p> <p>Font Awesome 5 shows empty square when using the JS+SVG version</p> <p>Font Awesome 5 unicode</p> <p>Font Awesome 5, why is css content not showing?</p>

Font Awesome 5 on pseudo elements shows square instead of icon

I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.

1) I have imported FA from the documentation and in the <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) My html looks like this :

<span class='myClass'>Movies</span>

3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.

My css currently looks like this but it isn't working, it gives me a square instead of the icon.

.myClass {    font-size:25px;  }    .myClass::after {    font-family: 'Font Awesome 5 Free';    content: '\f008';  }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">  <span class='myClass'></span>

Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?

(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)

Why are some of my Font Awesome icons not showing?

If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.

How do I use Font Awesome 5 icons?

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.

^{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>

The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:

https://fontawesome.com/icons/film?style=solid

CSS fontawesome 5 pseud element font weight

Why the other icon is working?

Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.

.myClass::after {   font-family: 'Font Awesome 5 Free';   content: "\f007";   visibility: visible;   font-weight: 900; }  .myClass-1::after {   font-family: 'Font Awesome 5 Free';   content: "\f007";   visibility: visible; }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> <span class='myClass'>Solid </span> <br> <span class='myClass-1'>Regular </span>

As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used

You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Font Awesome 5 - pseudo element

Font Awesome 5 on pseudo elements shows square instead of icon

Tags:

html

css

pseudo-element

font-awesome

font-awesome-5

nsayer

People also ask

2 Answers

`font-weight:900`

Temani Afif

G-Cyrillus

Recent Activity

Donate For Us