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:

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 or yarn:

npm
yarn

npm install --save @fortawesome/fontawesome-free

yarn add @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:

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 or yarn:

npm
yarn

npm install --save @fortawesome/fontawesome-pro

yarn add @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:

@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

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.