Use Package Managers

Package managers like npm (opens new window) and yarn (opens new window) 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:

Path	What It Is	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`

Installing the Free version of Font Awesome

You can easily install the latest free version of Font Awesome via npm (opens new window) or yarn (opens new window):

npm install --save @fortawesome/fontawesome-free
yarn add @fortawesome/fontawesome-free

See this Stack Overflow question on the difference between --save and --save-dev (opens new window). 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.

Keep It Secret, Keep It Safe!

Your super-secret npm token - TOKEN - is private. Don't share it with anyone who shouldn't have it. (You can find it in your account.)

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:

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):

@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 (opens new window) or yarn (opens new window):

npm install --save @fortawesome/fontawesome-pro
yarn add @fortawesome/fontawesome-pro

See this Stack Overflow question on the difference between --save and --save-dev (opens new window). 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:

@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):

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

We Have Phased Out The Old Method Of Npm Registry Authentication

The old way set just one configuration key, which combined the server address and your token. This new way sets two different configuration keys: one for the server address and a second for your token. If you're currently doing it the old way, please update your configuration to this new way. Make sure that you remove any yarn.lock or package-lock.json file prior to installing again as these files will have the old unsupported URLs in them.

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.