You're viewing docs for v5.15.4, an older version of Font Awesome.

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
Advertisement

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.

      Advertisement

      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.