22

I've used the Font Awesome icons before (previous version). Back then, I used a CDN like below in my HTML. But now I can't find it anymore. Is there any change on how to use them?

<link rel="stylesheet" 
  href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Rocky Barua
  • 512
  • 1
  • 4
  • 17
  • 1
    From their [document page](https://fontawesome.com/docs/web/setup/use-kit), they said _The Font Awesome CDN does not support v6 so your best bet is to use a Kit._ It seems they don't want you to use CDN but yes, you can use CDN link in the answer below. – vee Mar 16 '22 at 17:53
  • @vee Please be careful with references like "below". Currently (at least by my sorting) you are endorsing a somewhat improveable answer... – Yunnosch Aug 15 '23 at 06:26
  • @Yunnosch It's comment section and there are characters **limited**. There are at least 2 answers currently using CDN. So, it is not so hard to just scroll down and try those links. This should be easy to understand and shouldn't be the point. – vee Aug 15 '23 at 07:34

3 Answers3

52

To use the new free Font Awesome 6, you can again use the CDN (if that's your preference) like the following.

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

Then use icons in your HTML like the following.

<i class="fa-solid fa-house"></i>
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
  • Thanks. Can i enquire some websites use unicode to point to the icon? Why would they do that if it is possible to use name such as fa-house. Which is a better practice? – Nick Wills Sep 08 '22 at 03:21
  • If you want to use insert an icon in CSS using `::before` or `::after` with `content`, then you need the unicode. The names are the best option for HTML. – Brett Donald Oct 26 '22 at 07:12
7
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

add this link in your head of the html file, and use a font awesome link for an icon. if the link is like

<i class="fa fa-camera-retro"></i>

you want to use it in your page inside of <a tag like

<a><i class="fa fa-camera-retro"></i> fa-camera-retro</a>
Marynathan Judson
  • 130
  • 5
3

It is worth flagging here that whilst yes, the CDN is possible (and you can also download the files and host them locally (https://fontawesome.com/docs/web/setup/host-yourself/webfonts)) these fonts are a limited subset of the "Free plan" version.

For example, fa-envelope-o will come up as a Free icon but if you look in the webfonts or all.css this is not included. However it is if you signup for the free plan (https://fontawesome.com/plans). They will send you a .js link to include however you are limited to 10k connections per month. Which for most sites will be suitable and opens up a much larger selection than the CDN option.

I have nothing to do with FA - just figured out why downloading and hosting the fonts yourself is pointless and you might as well just signup!

Antony
  • 3,875
  • 30
  • 32
  • 10K is small for my blog, is there any alternative with CDN option? – Cemstrian Jun 14 '23 at 06:54
  • 1
    I'm no expert but I think if 10k isn't sufficient you'd need to pay. Its $99 a year so not horrendous - I guess it depends how many you need. Or alternatively find a different free icon provider. – Antony Jun 14 '23 at 07:13