Prefer to get a copy and use Font Awesome alongside your own project’s source code while building locally and serving in production? Downloading and hosting Font Awesome yourself is great for when you have many sites or apps in one codebase or want to customize parts of Font Awesome for your workflow.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The web-focused Font Awesome Package contains the following directories and files:
Files & Folders
What They Are
Where You Should Start
/css
Stylesheets for Web Fonts
all.css
/js
SVG with JavaScript
all.js
/less
Less pre-processor
fontawesome.less
/scss
Sass pre-processor
fontawesome.scss
/sprites
SVG sprites
solid.svg
/svgs
Individual SVG for each icon
individual *.svg icons
/webfonts
Web Font files used with CSS
See /css
Using Web Fonts with CSS
The /css/all.css file contains the core styling plus all of the icon styles that you'll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /webfonts folder and the /css/all.css into your project's static assets directory (or where ever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /css/all.css file into the <head> of each template or page that you want to use Font Awesome on.
Using the /scss or /less versions of Font Awesome we've bundled in the download?
Check out our Sass and Less docs for details on their contents. Once you've compiled them into CSS, you can follow the CSS-focused steps noted here to handle hosting and referencing icons.
Using SVG with JavaScript
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The /js/all.js loads all of the base features, plus all of the icon styles that you'll need when using Font Awesome. Copy it into your project's static assets directory (or where ever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /js/all.js file within the <head> of each template or page that you want to use Font Awesome on.
Since you're managing all of the downloaded files yourself, make sure the references in your pages' <head> are accurate with where you've moved all of Font Awesome's files in your project.
Using Just 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, and brands. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy both the /webfonts and the /css folders into your project's static assets directory (or where ever 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 to in the previous step.
We recommend keeping the /webfonts and /css folders in the same directory. If you don't, you'll need to change the path to the web fonts mentioned in each style's CSS file.
Want use only certain styles when using our SVG with JS framework?
The /js folder contains the core styling and additional files for all of Font Awesome's style options.
Copy the fontawesome.js loader and whatever icon styles' .js files you'd like to use into your project's static assets directory (or where ever you prefer to keep front end assets or vendor stuff). We recommend referencing the fontawesome.js loader last.
Since you're managing all of the downloaded files yourself, make sure the references in your pages' <head> are accurate with where you've moved all of Font Awesome's files in your project.
Next Steps
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
With the references complete, you can now start referencing icons in your templates or pages' <body> and then check out all of the styling support we pack into those supporting files you've loaded.