For those using
npm
oryarn
package managers, you can use the Font Awesome packages to easily keep your project up-to-date with the latest icons and improvements.
We’ll cover the basics of choosing the package that best suits your needs, access configuration, tips for which method to use for adding icons, and more!
We have a couple of packages available:
Package | What's in it | What's it good for |
---|---|---|
fontawesome-pro | All the Version 6 goodness including all the latest features and Pro icons, spanning 5 styles available in 2 families, Classic and our new Sharp. And there's our Brands icon family on top of that too. | Making projects awesome |
fontawesome-free | All the Version 6 goodness but just the Free icons | Open Source projects |
Basically, the packages contain all the stuff in the Font Awesome for Web download, but bundled as a package. Pick the one that suits your project and follow the steps below to get set up.
1. Configure Access
If you're just using the Free package, you can skip this step.
If you plan to use the Pro packages, which contain more icons and styles, you'll need to have an active subscription to a Pro Plan and a valid Pro Package Token and then follow the steps below to configure Pro access for your project.
Now that you've got your package token handy, you'll need to configure the @fortawesome
scope to use our Pro npm registry. You can set this up globally or per-project.
Set Up npm Token for All Projects
This global setup will allow any of your projects to use the Font Awesome package and your token. For the global set up, run:
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" TOKEN
Set Up npm Token for a Specific Project
This per-project setup lets you configure each project individually, which can be good for teams and CI/CD.
You'll need to create a .npmrc
file in the root of your project (or wherever your package.json
file lives) and put this in it:
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN
Alternate Per-project Setup: Using 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}
Per-project Setup for Modern Yarn
Using a .npmrc file works great for Yarn 1.x but for modern Yarn, you'll want to set up a .yarnrc.yml file.
npmScopes:
fortawesome:
npmAlwaysAuth: true
npmRegistryServer: "https://npm.fontawesome.com/"
npmAuthToken: "TOKEN"
Modern Yarn setup with envrionment variables.
npmScopes:
fortawesome:
npmAlwaysAuth: true
npmRegistryServer: "https://npm.fontawesome.com/"
npmAuthToken: "${FONTAWESOME_NPM_AUTH_TOKEN}"
Basic Authentication for Proxys
If you're using a proxy, you can use basic authentication in your .npmrc file.
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:username=token
//npm.fontawesome.com/:_password=TOKEN
2. Install Your Package
There are two options to for installing the Font Awesome packages:
Install | What You Get |
---|---|
All The Things | The Free and Pro packages include not only the icons in all the styles, but also all the supporting files to make them render. This is the easiest and most common installation. Follow the steps below for this installation. |
Certain Specific Things | You can start with just the core javascript files and then select specific styles of icons. This gives you more control if you plan to use our Javascript API, a Javascript component, tree-shaking, or just want to fine-tune what gets included. Follow the steps for Javascript API for this installation. |
The Pro Package
Once you have global or per-project access setup, you can install the Version 6 Pro package via npm or yarn:
npm install --save @fortawesome/fontawesome-pro
yarn add @fortawesome/fontawesome-pro
Or if you're using environment variables, you can do this instead:
FONTAWESOME_NPM_AUTH_TOKEN=TOKENVALUE npm install --save @fortawesome/fontawesome-pro
The Free Package
If you need just the Free icons, we have a slimmed-down free-only package for that. Install with this command:
npm install --save @fortawesome/fontawesome-free
yarn add @fortawesome/fontawesome-free
Or if you're using environment variables, you can do this instead:
FONTAWESOME_NPM_AUTH_TOKEN=TOKENVALUE npm install --save @fortawesome/fontawesome-free
3. Pick Your Method and Add Icons
You're all set to reference Font Awesome in your project. You can use either Web Fonts + CSS or SVG + JS to get icons into your projects.
Not sure which to pick? Learn which is right for your project.
4. Cache Your CI Dependencies
Tune your CI to keep your bandwidth usage low. We'll show you how.