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.
Advertisement
Tóm Tắt
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
-
All 16,083 Icons in Font Awesome
-
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
-
A Perpetual License to Use Pro
-
Services and Tools to Make Easy Work of Using Icons
-
Fresh Icons, Features, and Software Updates
-
Plus Support From Real Humans
Already have a Pro Plan?
Sign in
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
The /webfonts folder contains all of the typeface files, i.e., the icons. The /css/all.css file contains the core styling plus all of the icon styles you’ll need when using Font Awesome.
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
Using Only Certain Styles?
Select just the CSS files for the styles you need to cut down on file size and improve performance.
Add Font Awesome Files to Your Project
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.
Copy webfonts and CSS assets into one of your project directories
Include Font Awesome in Your Project
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.
<
head>
<
link href
=
"
/your-path-to-fontawesome/css/all.css"
rel
=
"
stylesheet"
>
</
head>
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> are accurate with 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!
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
-
All 16,083 Icons in Font Awesome
-
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
-
A Perpetual License to Use Pro
-
Services and Tools to Make Easy Work of Using Icons
-
Fresh Icons, Features, and Software Updates
-
Plus Support From Real Humans
Already have a Pro Plan?
Sign in
Using Only Certain Styles
Want to use just certain styles of icons when using our Web Fonts with CSS framework? The /css folder contains the core styling and additional files for all of Font Awesome’s style options — solid, regular, light, duotone, thin, and brands. The /webfonts folder contains all of the typeface files that the above CSS files depend on.
Icon Style Web Font Filename CSS Filename Availability Font Awesome Brands fa-brands-400.* brands.css Free Font Awesome Solid fa-solid-900.* solid.css Free Font Awesome Regular fa-regular-400.* regular.css Pro only Font Awesome Light fa-light-300.* light.css Pro only Font Awesome Thin fa-thin-100.* thin.css Pro only Font Awesome Duotone fa-duotone-900.* duotone.css Pro only
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). You can remove any styles’ .css and web font files you don’t plan on using if you’d like.
Include the core styling file (/css/fontawesome.css) and the CSS for individual styles (e.g., /css/brands.css) into the <head> of each template or page that you want to use Font Awesome on. Pay attention to the pathing of your project and where you moved the files in the previous step.
<
head>
<
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>
<
i class
=
"
fa-brands fa-github-square"
>
</
i>
</
body>
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
-
All 16,083 Icons in Font Awesome
-
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
-
A Perpetual License to Use Pro
-
Services and Tools to Make Easy Work of Using Icons
-
Fresh Icons, Features, and Software Updates
-
Plus Support From Real Humans
Already have a Pro Plan?
Sign in
Older Version Compatibility
If your project is using an older version of Font Awesome, we’ve got you covered with backward compatiiblity.
Version 5 Compatibility
If you are loading Font Awesome using the css/all.css file, our CSS will translate any Font Awesome 5 icon names, style syntax, and CSS pseudo-element icon references automatically.
<
head>
<
link href
=
"
/your-path-to-fontawesome/css/all.css"
rel
=
"
stylesheet"
>
</
head>
If, however, you are using only certain styles, you will need to also include the css/v5-font-face.css file. This file declares new @font-face rules for the various v5 font-family CSS values and points their url properties at latest version’s font files. This is useful when writing custom CSS or using pseudo-elements.
<
head>
<
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"
>
<
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, you can include additional files to support that specific version as well.
In addition to whatever v6 CSS files you’re including, you’ll want to include the following v4-shims.js file, which will map v4 icon names to icons in the latest version of Font Awesome.
<
head>
<
link href
=
"
/your-path-to-fontawesome/css/all.css"
rel
=
"
stylesheet"
>
<
link href
=
"
/your-path-to-fontawesome/css/v4-shims.css"
rel
=
"
stylesheet"
>
</
head>
Similarly to Version 5 compatibility, if you are using only certain styles, you will need to also include the css/v4-font-face.css file to update your project’s v4 CSS to use the latest version’s Web Fonts. This again is useful when writing custom CSS or using pseudo-elements.
<
head>
<
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"
/>
<
link href
=
"
/your-path-to-fontawesome/css/v4-font-face.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.
