Asked  6 Months ago    Answers:  5   Viewed   119 times

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)

 Answers

69

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


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?

Tuesday, June 1, 2021
 
Hugo
answered 6 Months ago
85

You need to enable it (it's disabled by default).

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Css:

.class:before{
  display: none;
  content: "f16c";
  font-family: "Font Awesome 5 Brands";
}

Other types: Font Awesome 5 + Solid or Regular or Light or Brands

Saturday, July 10, 2021
 
seaders
answered 5 Months ago
65

Interestingly enough, I found you only need to change one line of code for this to work. Testing on your .container2 element in jsFiddle, change this

.container2:after {
    font-family: FontAwesome;
    content: "f111";
    display: inline-block;
}

to

.container2:after {
    font-family: FontAwesome;
    content: "f111";
    display: inline;
}

It seems to work with any width I set the container to and will stay connected to what ever foo will be.

Wednesday, July 28, 2021
 
zhartaunik
answered 4 Months ago
91

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>

We can also consider the use of conic-gradient() with one icon. Again, it is specific to this particular case:

.fa-google {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<i class="fab fa-google fa-10x"></i>
<i class="fab fa-google fa-6x"></i>
<i class="fab fa-google fa-3x"></i>

Fontawesome Google icon multi color

The above will not work in all the browser so you can consider multiple linear-gradient like below:

.fa-google {
  background: 
    linear-gradient(to bottom left,transparent 49%,#fbbc05 50%) 0 25%/48% 40%,
    linear-gradient(to top    left,transparent 49%,#fbbc05 50%) 0 75%/48% 40%,
  
    linear-gradient(-40deg ,transparent 53%,#ea4335 54%),
    linear-gradient( 45deg ,transparent 46%,#4285f4 48%),
    #34a853;
  background-repeat:no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/*#fbbc05*/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<i class="fab fa-google fa-10x"></i>
<i class="fab fa-google fa-6x"></i>
<i class="fab fa-google fa-3x"></i>
Monday, August 2, 2021
 
Yu Sasaki
answered 4 Months ago
21

I've managed to solve this strange issue. Turned out it was an Apache problem, got the solution from: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

I've added to my .htaccess the following lines:

If you are serving from Apache, you can add this to your .htaccess file to allow your site access to the fonts:

<FilesMatch ".(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

and the font now is ok.

Thursday, September 16, 2021
 
Bert Carremans
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share