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:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width"/><title>Require.js + Font Awesome SVG with JavaScript</title><scriptdata-main="scripts/main"src="scripts/require.js"></script></head><body></body></html>
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.
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:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width"/><title>Require.js + Font Awesome SVG with JavaScript</title><scriptdata-main="scripts/main"src="scripts/require.js"></script></head><body><iclass="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.
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:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width"/><title>Require.js + Font Awesome SVG with JavaScript</title><scriptdata-main="scripts/main"src="scripts/require.js"></script></head><body><iclass="fas fa-mug-saucer fa-10x"></i><iclass="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:
Adding the Brands style
Accessing Font Awesome's API
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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.