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.

Advertisement

We’ll cover the step-by-step basics of getting Require.js set up with Font Awesome, adding a style, displaying icons, and accessing Font Awesome’s API.

Before You Get Started

Make sure you:

Step-by-Step

First, create a new directory called myproject.

  1. Download Require.js (opens new window) and place it in a scripts directory.
  2. Download Font Awesome and copy all the files in the js directory into scripts/vendors/fontawesome.
  3. Create an empty scripts/main.js file.
  4. 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.

Advertisement

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.

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
Advertisement

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="fa-solid 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="fa-solid fa-mug-saucer fa-10x"></i>
      <i class="fa-brands 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/thin': 'vendor/fontawesome/thin.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
Advertisement

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

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!