Require.js

Font Awesome works well with Require.js, especially if you are using Web Fonts. But if you're using SVG + JS, you'll need to make a few adjustments.

Before You Get Started

Make sure you:

Plan to use the SVG+JS method of Font Awesome.
Have your project files handy to work on.

Step-by-Step

First, create a new directory called myproject.

Download Require.js (opens new window) and place it in a scripts directory.
Download Font Awesome and copy all the files in the js directory into scripts/vendors/fontawesome.
Create an empty scripts/main.js file.
Create an empty index.html file.

After you finish, your directory structure should look something like this:

myproject
├── index.html
└── scripts
   ├── main.js
   ├── require.js
   └── vendor
      └── fontawesome
         ├── all.js
         ├── all.min.js
         ├── brands.js
         ├── brands.min.js
         ├── conflict-detection.js
         ├── conflict-detection.min.js
         ├── fontawesome.js
         ├── fontawesome.min.js
         ├── regular.js
         ├── regular.min.js
         ├── solid.js
         ├── solid.min.js
         ├── v4-shims.js
         └── v4-shims.min.js
 

If you are using Font Awesome Pro, you can download and copy the files the same way. You'll just have more files since you'll have all the Font Awesome styles at your fingertips.

Requiring Font Awesome

The first step is to configure Require.js, so that it can find Font Awesome and load a minified version. In your index.html file, add the following:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width" />
      <title>Require.js + Font Awesome SVG with JavaScript</title>
      <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
    </body>
  </html>
 

Nothing special going on here.

We use data-main and point to scripts/main.js just like the getting started Require.js docs (opens new window) tell us to.
We set the src attribute to the location we've installed Require.js.

Now in your scripts/main.js add:

  require.config({
    paths: {
      'fontawesome': 'vendor/fontawesome/fontawesome.min'
    }
  })

  require(['fontawesome'], function (fontawesome) {
    console.log('Congrats, Font Awesome is installed using Require.js')
  })
 

We start by configuring Require.js to understand that when we reference fontawesome it should look in vendors/fontawesome and load the fontawesome.min.js file.

Open the Project in Your Browser

Load your browser, and open the index.html file you just created -- we recommend Firefox, Chrome, or Safari -- and open the Developer Tools to inspect the console.

A Screenshot of the browser console

Console message letting us know FontAwesome was installed

Add a Style and Display an Icon

In your index.html file, you can add an icon like this:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width" />
      <title>Require.js + Font Awesome SVG with JavaScript</title>
      <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
      <i class="fas fa-mug-saucer fa-10x"></i>
    </body>
  </html>
 

In your scripts/main.js file, add the following:

  require.config({
    paths: {
      'fontawesome': 'vendor/fontawesome/fontawesome.min',
      'fontawesome/solid': 'vendor/fontawesome/solid.min'
    },
    shim: {
      'fontawesome': {
        deps: ['fontawesome/solid']
      }
    }
  })

  require(['fontawesome'], function (fontawesome) {
    console.log('Congrats, Font Awesome is installed using Require.js')
  })
 

That adds some dependencies to the fontawesome name using the Require.js shim property (opens new window). The dependency we will load is the Solid style icons anytime fontawesome is loaded.

The paths section of fontawesome/solid points to the minified version of the Solid style.

A Screenshot of the browser console with a solid icon loaded

Loading the Solid style and displaying an icon

Adding More Icon Styles

But you'll probably want more than just the Solid icon style. Here's how to add in other styles. In your index.html file, you can add an Twitter icon from the Brands style:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width" />
      <title>Require.js + Font Awesome SVG with JavaScript</title>
      <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
      <i class="fas fa-mug-saucer fa-10x"></i>
      <i class="fab fa-twitter fa-10x"></i>
    </body>
  </html>
 

And in your scripts/main.js, you can add any of the styles you plan to use in your project, like this:

  require.config({
    paths: {
      'fontawesome': 'vendor/fontawesome/fontawesome.min',
      'fontawesome/solid': 'vendor/fontawesome/solid.min',
      'fontawesome/brands': 'vendor/fontawesome/brands.min'
      // Pro files can be added like this:
      // 'fontawesome/regular': 'vendor/fontawesome/regular.min',
      // 'fontawesome/light': 'vendor/fontawesome/light.min',
      // 'fontawesome/duotone': 'vendor/fontawesome/duotone.min'
    },
    shim: {
      'fontawesome': {
        deps: ['fontawesome/solid', 'fontawesome/brands']
      }
    }
  })

  require(['fontawesome'], function (fontawesome) {
    console.log('Congrats, Font Awesome is installed using Require.js')
  })
 

You can see the Twitter icon now appears next to the mug:

A Screenshot of the browser console with a brand icon loaded

Adding the Brands style

Accessing Font Awesome's API

You can also use Font Awesome's Javascript API to add icons. We'll need to configure Require.js to export it. In your scripts/main.js, you use the API like this:

  require.config({
    paths: {
      'fontawesome': 'vendor/fontawesome/fontawesome.min',
      'fontawesome/solid': 'vendor/fontawesome/solid.min',
      'fontawesome/brands': 'vendor/fontawesome/brands.min'
    },
    shim: {
      'fontawesome': {
        deps: ['fontawesome/solid', 'fontawesome/brands'],
        exports: 'FontAwesome'
      }
    }
  })

  require(['fontawesome'], function (fontawesome) {
    console.log('Congrats, Font Awesome is installed using Require.js')

    var icon = fontawesome.icon(
      fontawesome.findIconDefinition({ iconName: 'stroopwafel' }),
      {
        classes: ['fa-10x']
      }
    )

    document.body.appendChild(icon.node[0])
  })
 

The exports property instructs Require.js to use the global FontAwesome name and make it available as the value passed into the require function callback.

We can then use it to create an icon and add it to the DOM.

A Screenshot of the browser console with an icon loaded using the API

Adding an icon using the Font Awesome JS API