Home › Tools › Images › Font Awesome Guide

Font Awesome Integration Guide

Font Awesome is a popular icon library. Add it to any website in minutes.

1. Add via CDN (quickest)

Paste this in your <head> before closing </head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Use icons

Font Awesome 6 uses two styles: solid (fas) and regular (far). Example:

<i class="fas fa-heart"></i>      <!-- solid heart -->
<i class="far fa-heart"></i>      <!-- regular heart -->
<i class="fas fa-home"></i>      <!-- home icon -->
<i class="fas fa-search"></i>    <!-- search icon -->

3. NPM install (for build tools)

npm install @fortawesome/fontawesome-free

Then import in your main JS/CSS:

import '@fortawesome/fontawesome-free/css/all.min.css';

4. Find icons

Browse all icons at fontawesome.com/icons. Search by name (e.g. user, settings, star).

5. Kit (Pro / custom)

Font Awesome offers a Kit for Pro subscribers: one script URL that loads your chosen icons. For most projects, the free CDN above is enough.

What is this tool?

How do I add Font Awesome icons? This guide shows the CDN snippet for quick setup, npm install for build tools, and usage examples (solid and regular styles). Link to fontawesome.com for icon search.