Getting started with Font Awesome 6

17 Sep 2022 - by 'Maurits van der Schee'

When you want to integrate the free Font Awesome icons in your application or website you are asked to "Enter your email to get started with a free Kit!" (source). It was always possible to just copy a single line in the head of your HTML. Fortunately this is still possible, this post will explain how. It will also show where to download the distribution for self hosting Font Awesome in your web site or web application.

Get started with a CDN

Okay, so all you need to do is put the following line between the "<head>" and "</head>" tags in your HTML:

<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free@6.2.0/css/all.min.css">

Now you can test that it works by pasting this snippet in your HTML:

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

This should display the "home" icon. If you want to search the 2000+ free icons, search them here.

Download for self hosting

If you are building a web site or web application and you want to host the 2000+ free icons of Font Awesome on your own domain, then you can download the set from:

https://github.com/FortAwesome/Font-Awesome/releases

There is a file named "fontawesome-free-6.2.0-web.zip" which is about 6 megabyte in size and has the following structure:

.
├── css
├── js
├── less
├── metadata
├── scss
├── sprites
├── svgs
│   ├── brands
│   ├── regular
│   └── solid
└── webfonts

You can place this is the document root of your web server in the folder "fontawesome-free" and then add the following link in the head of your HTML:

<link rel="stylesheet" href="/fontawesome-free/css/all.min.css">

Easy isn't it? No need to enter your e-mail address for some "Kit", whatever it may be.

Happy programming!

PS: Liked this article? Please share it on Facebook, Twitter or LinkedIn.

TQ
dev.com