Skip to content
Font Awesome Docs: Version 5
Say hello to Web Awesome, the biggest and best library of open-source web components.
Pre-order today!
You're viewing the Version 5 Docs. View the latest

Use Package Managers

Package managers like npm and yarn are probably familiar tools for you and your team. With them, you can easily upgrade to newer versions of Font Awesome when they are released and better manage access to Pro packages.

What’s in the Font Awesome Package?

The Web-focused Font Awesome Package contains the following directories and files:

PathWhat It IsWhere You Should Start
/cssStylesheets for Web Fontsall.css
/jsSVG with JavaScriptall.js
/lessLess pre-processorfontawesome.less
/scssSass pre-processorfontawesome.scss
/spritesSVG spritessolid.svg
/svgsIndividual SVG for each iconindividual *.svg icons
/webfontsWeb Font files used with CSSSee /css

Installing the Free version of Font Awesome

You can easily install the latest free version of Font Awesome via npm or yarn:

Terminal window
npm install --save @fortawesome/fontawesome-free

See this Stack Overflow question on the difference between --save and --save-dev. Yarn also lets you use --dev to save as a development dependency.

Installing the Pro version of Font Awesome

Access to the Pro packages, which contain more icons and styles, requires you to configure the @fortawesome scope to use our Pro NPM registry.

You have a couple of options on how to configure the @fortawesome scope to use our Pro NPM registry:

Global Set Up

Globally set these values, so it works in any project:

Terminal window
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" TOKEN

Per-Project

If you’d prefer a per-project setting (great for teams and CI/CD), create a .npmrc file in the root of your project (or where you have your package.json file):

Terminal window
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN

After that configuration, you can install the latest Pro version of Font Awesome via npm or yarn:

Terminal window
npm install --save @fortawesome/fontawesome-pro

See this Stack Overflow question on the difference between --save and --save-dev. Yarn also lets you use --dev to save as a development dependency.

Environment Variables

You can use npm environment variables in your .npmrc file if you prefer:

Terminal window
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

And then run this command to install the all Pro icons package (or edit the package name at the end to install a different package):

Terminal window
FONTAWESOME_NPM_AUTH_TOKEN=TOKENVALUE npm install --save @fortawesome/fontawesome-pro

Next Steps

Reference either the /css/all.css or the /js/all.js, which contains everything you need to use Font Awesome in the <head> of each template or page that you want to use Font Awesome on. Be mindful of paths from where you installed the package from when doing so.

Want just certain styles of icons?

If you would like only to use specific styles rather than the default all option we’ve included in our Web Fonts and SVG frameworks, reference the specific styles you want to use like fa-brands or fa-regular and then the loader fontawesome in place of all

  <head>
    <!-- Our project just needs Font Awesome solid + brand -->
    <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>

After you get things installed, check out all of our icons and learn how to reference them in HTML.