1

I am using the following method to display icons

&:before {
  font-family: Fontawesome;
  content: "\f468";
}

that works for about 30% of the icons. For example I tried the above, f468 and that did not work but when i did <i class="fas fa-boxes"></i> the icon displayed. Can you see the problem?

Im using https://use.fontawesome.com/releases/v5.5.0/css/all.css

Omar
  • 2,726
  • 2
  • 32
  • 65

1 Answers1

1

In the Font Awesome stylesheet, .fas{} has font-weight: 900; Many icons will show alternate versions or no icon at all if you do not include this.

&:before {
  font-family: Fontawesome;
  font-weight: 900;
  content: "\f468";
}

See if this code works for you.

Alexander Rice
  • 160
  • 1
  • 5
  • changing the font-weight did not work. Maybe we are writing the `font-fam` wrong? It may also have something to do with `fas` vc `fa` – Omar Nov 14 '18 at 22:02
  • try `font-family: "Font Awesome 5 Free";` example works for me with f468 – qfazille Nov 15 '18 at 11:19
  • The font-family is wrong. qfazille shows the font family that fontawesome ues in their code.The easiest way for you to figure this out is to inspect the working fa-boxes code and see what it uses differently. I had assumed based on your use of "Fontawesome" as the font-family that you may have downloaded the font and renamed it. If changing the `font-family: "Font Awesome 5 Free"` doesn't work, please give us a demo with more information - the stylesheet link you use for example. – Alexander Rice Nov 15 '18 at 17:44