Host Yourself - Web Fonts | Font Awesome Docs

If you like control, you can host Font Awesome yourself, and you can choose to use Web Fonts + CSS described below or SVG + JS to get icons into your projects.

We’ll cover the basics of getting set up with Web Fonts and how you can use specific Font Awesome icon styles.

Before You Get Started

Make sure you:

Download the Font Awesome v6 files and have them handy.
Want to use the WebFonts+CSS method of Font Awesome.

Set-Up with Web Fonts

Inside the Font Awesome Download or package, you'll find the files you need. The /css folder contains the core styling and utilities for all of Font Awesome's families (Classic, Sharp, and Brands) as well as style options (Solid, Regular, Light, Duotone, and Thin). The /webfonts folder contains all of the typeface files that the CSS files depend on.

There's a Free and Pro version of each in our Pro download - pick the one that's right for your project and grab those files.

Which Files and Folders	What’s in there
`/fontawesome6/pro/webfonts`	Icons as Web Fonts to be used with CSS
`/fontawesome6/pro/css`	CSS files for using Web Fonts
`/fontawesome6/free/webfonts`	Just the Free Icons as Web Fonts to be used with CSS
`/fontawesome6/free/css`	CSS files for using just the Free Web Fonts

Add Font Awesome Files to Your Project

Copy both the /webfonts and the /css folders into your project's static assets directory (or wherever you prefer to keep front-end assets or vendor stuff). Be sure to include the core styling file - /css/fontawesome.css - as well as the CSS files for any individual styles you want to use, and you can remove any .css and web font files you don't plan on using.

Copy webfonts and CSS assets into your project directories

Copy webfonts and CSS assets into one of your project directories

Here's a handy table that shows which files go with which styles:

Icon Style	Availability	Web Font Filename	CSS Filename
Brands	Free	`fa-brands-400.*`	`brands.css`
Solid	Free	`fa-solid-900.*`	`solid.css`
Regular	Pro only	`fa-regular-400.*`	`regular.css`
Light	Pro only	`fa-light-300.*`	`light.css`
Thin	Pro only	`fa-thin-100.*`	`thin.css`
Duotone	Pro only	`fa-duotone-900.*`	`duotone.css`
Sharp Solid	Pro only	`fa-sharp-solid-900.*`	`sharp-solid.css`
Sharp Regular	Pro only	`fa-sharp-regular-400.*`	`sharp-regular.css`
Sharp Light	Pro only	`fa-sharp-light-300.*`	`sharp-light.css`

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

Reference Font Awesome in Your Project

Link the core fontawesome.css file along with the CSS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to. Make sure the paths correctly point to where you placed the files!

Here's an example html page with the file links in the <head> and a couple of icons in the content.

<head>
  <!-- our project just needs Font Awesome Solid + Brands -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
</head>
<body>
  <i class="fa-solid fa-user"></i>
  <!-- uses solid style -->
  <i class="fa-brands fa-github-square"></i>
  <!-- uses brand style -->
</body>

Just this once, we recommend letting things go to your head.

Double-Check Your Paths

Make sure the paths of the files you've included in your pages' <head> point to where you've moved all of Font Awesome's files in your project.

Yuss! You’re Ready to Add Icons

Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your project and then use their power to bring order and style to your UI!

Add Some Icons!

Alternate Install: Using all.css

In the /css folder, you may have noticed a file named all.css. This file contains the core styling and utilities PLUS all of the icons in all the Classic styles in Font Awesome. (The Sharp family is not included in the all.css file - you'll need to add the Sharp .css files separately.)

It's a handy file if you'll be using all the icon styles or testing out different styles as you develop your project. But if you're using just a couple of styles, we don't recommend it for production sites since loading all of the icons and files isn't great for performance.

If you'd like to use the all.css, just copy the /webfonts folder and the /css/all.css file into your project’s assets directory where other images and CSS are stored. You'll want to keep them in the same directory.

Then, add a link to the /your-path-to-fontawesome/css/all.css file into the <head> of each template or page where you want to use Font Awesome.

Hosting Your Own Downloaded Kit

If you'd rather do the heavy lifting, you can download any Pro Kit and host it yourself! To download your Kit, make sure it's a Pro with the version in Settings is set to "Latest 6.x" or at least 6.4. Then from the Set Up tab in your Kit, you'll see the options for downloading.

Custom Icons in Downloaded Kits

If you have custom icons in your Kit, they will be included in your Kit download. You'll find these additional files included in the download zip:

Path to the files	What the files do
`/css/custom-icons.css`	Handles the display of custom icons with Web Fonts
`/js/custom-icons.js` `/js/custom-icons.min.js`	Handles the display of custom icons with SVG+JS
`/sprites/custom-icons.svg`	All your custom icons in one SVG sprite
`/svgs/custom-icons/`	Folder containing all your custom icons as SVGs
`/webfonts/custom-icons.woff` `/webfonts/custom-icons.ttf`	Custom icon font in WOFF2 and TTF formats
`/scss/custom-icons.scss` and `/less/custom-icons.less`	Sass (SCSS) and Less Preprocessor partials that handle the display of custom icons with Web Fonts

These files will work the same as the Font Awesome files and assets. And if you are using all.js or all.css, your custom icons will be included in those, though for performance reasons, we recommend adding just the files you are using in your project.

Here's an example project using Sharp Solid and custom icons from a downloaded Kit:

<head>
  <!-- Our project just needs Font Awesome Sharp Solid + our Custom Icons -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/custom-icons.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet">  
</head>
<body>
  <!-- uses sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>
  <!-- uses Kit custom icon style -->
  <i class="fa-kit fa-your-custom-icon-name"></i>
</body>

Using Kit custom icons is easy peasy.

Older Version Compatibility

If your project is using an older version of Font Awesome, we've got you covered with backward compatibility. That means you won't have to update any icon names in your project - we'll translate any older version icon names, style syntax, and CSS pseudo-element icon references automatically. Here's how to enable that support for the previous version you need to support:

Version 5 Compatibility

If you're hosting yourself and using only certain styles, add the css/v5-font-face.css to the files linked in your html head. (The all.css file includes these utilities by default so you won't need to do anything.)

Here's an example:

<head>
  <!-- Loading the v6 core styles and the Solid and Brands styles -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

  <!-- update existing v5 CSS to use v6 icons and assets -->
  <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet">
</head>

Version 4 Compatibility

If your project contains Font Awesome 4 icon references, add the css/v4-font-face.css to the files linked in your html head. Our CSS will then translate any Font Awesome 4 icon names and CSS pseudo-elements references to Version 6 automatically.

<head>
  <!-- Add the v6 core styles and then select the individual styles you need, like Solid and Brands -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />

  <!-- support v4 icon references/syntax -->
  <link href="/your-path-to-fontawesome/css/v4-font-face.css" rel="stylesheet" />
</head>

If you're using all.css, you'll need to add the v4-shims.js file, which will map V4 icon names to icons in the latest version of Font Awesome, like this:

<head>
  <!-- load all Font Awesome v6 styles -->
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

  <!-- support v4 icon references/syntax -->
  <link href="/your-path-to-fontawesome/css/v4-shims.css" rel="stylesheet">
</head>

If you need more help upgrading an existing project to a newer version of Font Awesome, check out our upgrading guides.