How to Add Font Awesome Icons to Any Website (2026)

Want to add Font Awesome icons to your website? Font Awesome is the most popular icon library on the web: thousands of scalable icons for social media, menus, buttons and lists, styled with CSS just like text. We started using it in 2013 as a replacement for Bootstrap’s Glyphicons and soon used it on every project. The library has grown through several major versions since, and the way you load it has changed. Here is how to add Font Awesome icons to any site in 2026.

Quick answer: Create a free Kit at fontawesome.com and paste its one-line script into your page head, or link the Font Awesome Free CSS from a CDN such as cdnjs. Then add an icon with an <i> tag, for example <i class="fa-solid fa-house"></i>. In WordPress, use the official Font Awesome plugin.

Why use an icon font?

Icons from Font Awesome are vector graphics, so they stay crisp at any size and on high-resolution screens. You can change their colour, size and hover effects with CSS, and one library replaces dozens of separate image files or old CSS sprites.

How to add Font Awesome to your site

Option 1: Font Awesome Kit (recommended)

1. Sign up free at fontawesome.com and create a Kit.
2. Copy the Kit’s script tag, which looks like <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>.
3. Paste it into the <head> of your pages. Kits update automatically and can load only the icons you use.

Option 2: CDN stylesheet

Link the free CSS from cdnjs or jsDelivr in your head section. Copy the current all.min.css link from the CDN page so you get the latest version. In 2013 we used BootstrapCDN, which has since moved to jsDelivr; see our tests of the fastest CDN for jQuery and Bootstrap.

Option 3: Self-host or npm

Download Font Awesome Free or install it with npm (npm install @fortawesome/fontawesome-free) and serve the files from your own server.

How to use Font Awesome icons

<i class="fa-solid fa-house"></i>        <!-- solid house -->
<i class="fa-regular fa-envelope"></i>    <!-- outline envelope -->
<i class="fa-brands fa-youtube"></i>      <!-- brand icon -->
<i class="fa-solid fa-star fa-2x"></i>     <!-- double size -->
<i class="fa-solid fa-spinner fa-spin"></i> <!-- spinning -->

Search the icon gallery on the Font Awesome site, filter by “Free”, and copy the code. Older code like fa fa-star from version 4 still works in many setups through shims, but new projects should use the current class names.

Style icons with CSS

• Change colour: .fa-youtube { color: #FF0000; }
• Change size with font-size or the fa-xs to fa-10x classes.
• Add accessible labels: decorative icons should have aria-hidden="true"; icons used as buttons need visible or screen-reader text.

Font Awesome in WordPress and Bootstrap

In WordPress, the official Font Awesome plugin loads icons and adds an icon block. Many themes already include it, so check before loading it twice. For Bootstrap projects, see how to use Font Awesome icons in Bootstrap, or try lightweight pure CSS social media icons.

Keep it fast

The full library adds weight. Use a Kit with subsetting, or SVG icons for just a handful of icons, and avoid loading Font Awesome on pages that do not use it. Check speed with Google PageSpeed Insights.

FAQ

Is Font Awesome free?

Yes. Font Awesome Free includes thousands of icons for personal and commercial use. Pro adds more icons and styles.

Why are my Font Awesome icons showing as squares?

The CSS or font files are not loading, or you are using class names from a different version. Check the browser console and match class names to your version.

Can I use Font Awesome without a Kit?

Yes. Use a CDN link or self-host the free files.