How to use Font Awesome 6 icons?

Question

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">

Answer 1

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.5.1/css/all.min.css">

Then, use icons in your HTML as follows.

<i class="fa-solid fa-house"></i>

Answer 2

<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>

Answer 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!