Say hello to Web Awesome, the biggest and best library of open-source web components.

Host Font Awesome Yourself

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.

What’s in the Download?

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.

<head>
  <!--load all Font Awesome styles -->
  <link href="path_to_css_files/all.css" rel="stylesheet">
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

Using SVG with JavaScript

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.

<head>
  <script defer src="path_to_js_files/all.js"></script> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

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.

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

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.

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

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.

Icon Style	JS Filename	Availability
Font Awesome Brands	`brands.js`	Free
Font Awesome Solid	`solid.js`	Free
Font Awesome Regular	`regular.js`	Pro only
Font Awesome Ligh	`light.js`	Pro only

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.

<head>
  <!-- Our project just needs Font Awesome Solid + Brands -->
  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>

Next Steps

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.