Use font awesome icon code without importing it

Question

I want to use the icon in font awesome like this:

<i class="fa fa-user" aria-hidden="true"></i>

But if I include the font awesome, for some reasons I have problems with the another font that I'm using and also the load time is slower. So I want to use only the code for actual fa fa-user, so I don't need to have all those imported only for one icon!

I tried to find a solution for that, but I couldn't? Is possible to do that?

Answer 1

You can't only include that one icon from the Font when downloading it; the entire Font must be downloaded for any of the icons to work. You can however tell the browser the Unicode Range which you're wanting to use for that font.

In Font-Awesome's case, the fa-user icon is at U+F007, so if you only want to include that icon, you only need to specify that in the unicode-range property:

@font-face {
  font-family: 'FontAwesome';
  unicode-range: U+F007;
}

That said, Font Awesome is a special case in that the author operates a couple of services which allow you to customise exactly which icons get included. On GitHub they have a Wiki entry about this: Customize Font Awesome.