Hello i want to add fa fa-users (the users icon from font awesome) but when i do <i class="fa fa-users" aria-hidden="true"></i> i am not getting the icon, html displays the code of the font-f0c0 that is. Any guess why?

p.s. i am using other fonts just fine e.g. contact, search and so on

Recommended Answers

So I use Font Awesome very heavily, and here's what I do. (In fact, I randomly saw your question while actively on the fontawesome.com website!)

Firstly, I use their CDN, as so:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Then, I use fas, fab, or far ... for solid icons, brand icons, …

Jump to Post

I've never tried hosting it myself, so I'm not sure. I vaguely remember having to set the font weight to something specific. I think it was that if I used fas the font weight had to be 400 or something like that. 600 for solid? I forget what it was.

Jump to Post

All 3 Replies

So I use Font Awesome very heavily, and here's what I do. (In fact, I randomly saw your question while actively on the fontawesome.com website!)

Firstly, I use their CDN, as so:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Then, I use fas, fab, or far ... for solid icons, brand icons, and regular icons. This changed in Font Awesome 5. Previous versions just had them all under fa but this latest version you need to specify the category. I typically use the solid versions (fas) with the exception of things like Facebook icons or social media brand icons, where I need fab. Try using fas fa-users instead of fa, and make sure you're using the latest version from the CDN.

I already did that. I use Ionic 3 with Angular 4 for my project and i call these files for FontAwesome

@font-face {
  font-family: 'FontAwesome';
  src: url("../assets/fonts/font-awesome/fontawesome-webfont.eot");
  src: url("../assets/fonts/font-awesome/fontawesome-webfont.eot") format("embedded-opentype"), url("../assets/fonts/font-awesome/fontawesome-webfont.woff2") format("woff2"), url("../assets/fonts/font-awesome/fontawesome-webfont.woff}") format("woff"), url("../assets/fonts/font-awesome/fontawesome-webfont.ttf") format("truetype"), url("../assets/fonts/font-awesome/fontawesome-webfont.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

I've never tried hosting it myself, so I'm not sure. I vaguely remember having to set the font weight to something specific. I think it was that if I used fas the font weight had to be 400 or something like that. 600 for solid? I forget what it was.