Font Awesome 5 on pseudo elements shows square instead of icon

Question

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)

can you share it's link wthin the fontawesome site ... so we verify it to which package it belong — Temani Afif, Apr 10 '18 at 13:29
@Roberrrt i meant the link of the icon ;) not the Font Awesome lib — Temani Afif, Apr 10 '18 at 13:31
Here is the icon link https://fontawesome.com/icons/film?style=solid — nsayer, Apr 10 '18 at 13:31
@Roberrrt something like this : https://fontawesome.com/icons/address-book?style=solid to verify the package as it may be a part of the Pro ones — Temani Afif, Apr 10 '18 at 13:31

Temani Afif · Accepted Answer · 2020-08-29T01:15:46.547

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

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

Related questions

Font Awesome 5 shows empty square when using the JS+SVG version

Font Awesome 5 unicode

Font Awesome 5, why is css content not showing?

Awesome, thanks for the explanation ! Do you know what `font-weight` I would need to use if the `light` version would have been free ? — nsayer, Apr 10 '18 at 13:47
@nsayer all the `light` icons are PRO so there is no font-weight for them in the free package ;) you can only use them if you get the PRO one — Temani Afif, Apr 10 '18 at 13:50
@nsayer for a lighter render, you may try text-stroke, see answer below for testing ;) — G-Cyrillus, Nov 12 '21 at 19:56

score 1 · Answer 2 · answered Nov 12 '21 at 19:55

from your comment :

Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?

test text-stroke with a transparent color to get a thinner render :

.myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}

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

score -1 · Answer 3 · answered Feb 06 '22 at 17:31

-1

list-style-image: url("../../media/examples/rocket.svg");

source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

answered Feb 06 '22 at 17:31

fruitloaf

1,628
15
10

Font Awesome 5 on pseudo elements shows square instead of icon

3 Answers3

`font-weight:900`

Linked

Related