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.
Set-Up with Web Fonts
/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|
|Icons as Web Fonts to be used with CSS|
|CSS files for using Web Fonts|
|Just the Free Icons as Web Fonts to be used with CSS|
|CSS files for using just the Free Web Fonts|
Add Font Awesome Files to Your Project
/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
Reference Font Awesome in Your Project
Add a link to the Just this once, we recommend letting things go to your head.
/your-path-to-fontawesome/css/all.css file into the
<head> of each template or page where you want to use Font Awesome.
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!
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 references and depends on.
|Icon Style ||Web Font Filename ||CSS Filename ||Availability|
|Font Awesome Brands || |
|Font Awesome Solid || |
|Font Awesome Regular || |
|Font Awesome Light || |
|Font Awesome Thin || |
|Font Awesome Duotone || |
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.
Add a reference to 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.