While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Introduction

Font Awesome is a toolkit for websites providing icons and social logos. React is a coding library using JavaScript for creating user interfaces. While the Font Awesome team have made a React component to promote integration, there are some fundamentals to understand about Font Awesome 5 and how it’s structured. In this tutorial you’ll learn the ways to use the React Font Awesome component.

There are around 4000 icons in the Font Awesome library.

Font Awesome website with it's icons

Using Font Awesome

In previous versions of Font Awesome, you would add the .css file to the head of your document and then use something like:

<i class="fa fa-user-happy"></i>

The downside to this was that you had to bring in the entire Font Awesome library even if you were only using some fonts. With Font Awesome 5, there are a few different ways you can use the icons. The benefit of the SVG way is its speed over the font-face way. With SVG we can also pick and choose which fonts we need and only include those in our final bundle size.

However when using Font Awesome and React together there can be a problem, when using JavaScript to pass our HTML, that the SVG may fire before React has time to mount its components. As a result we have to find a way to parse the HTML once React has mounted its components.

Using Font Awesome 5 and React

Lucky for us, the Font Awesome team has created a React component to use Font Awesome with React. With this library, we are able to do the following after you pick your icon. We’ll use the boxing-glove icon and do everything right inside App.js:

App.js
import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Now we have a small home icon. Notice how we can pick out only the home icon so that only one icon is added to our bundle size.

code sandbox with home icon showing

Now, Font Awesome will make sure that this component will replace itself with the SVG version of that icon once this component is mounted.

Choosing Fonts

Before installing and using the icons, it’s important to know how the Font Awesome libraries are structured. Since there are many icons, the team decided to split them up into multiple packages.

When picking and choosing which fonts you want, it’s recommend to visit the Font Awesome icons page. Notice the filters along the left. Those are very important because they will indicate what package to import your icon from.

In the example above, we pulled the home icon out of the @fortawesome/free-solid-svg-icons package.

Knowing which package an icon belongs to

You can figure out which package an icon belongs to by seeing the filters on the left. You can also click into an icon and see the package it belongs to.

Once you know which package a font belongs to, it’s important to remember the three-letter shorthand for that package.

You can search for a specific type from the icons page:
icon page with some of the package names on the left

Using Icons From Specific Packages

If you browse the Font Awesome icons page page, you’ll notice that there are usually multiple versions of the same icon like the boxing glove icon:

boxing glove icon three different versions

In order to use a specific icon, you will need to adjust your <FontAwesomeIcon>. Following are multiple types of the same icon from different packages. These include three-letter shorthands discussed earlier:

Note that the following examples won’t work until we build an icon library in a few sections:

// solid version
<FontAwesomeIcon icon={['fas', 'code']} />

// defaults to solid version if not specified
<FontAwesomeIcon icon={faCode} />

And the light version using fal:

// light version
<FontAwesomeIcon icon={['fal', 'code']} />;

We had to switch our icon prop to be an array instead of a simple string.

Installing Font Awesome

Since there are multiple versions of an icon, multiple packages, and free/pro packages, installing them all involves installing more than one npm package.

You’ll need to install multiple and pick and choose which icons you want.

For this article, we’ll install everything so we can demonstrate the multiple ways:

// the base packages
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

// regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

// solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

// light icons
npm i -S @fortawesome/free-light-svg-icons
npm i -S @fortawesome/pro-light-svg-icons

// brand icons
npm i -S @fortawesome/free-brands-svg-icons

Or if you prefer to get them all installed in one go:

// if you just want the free things
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-light-svg-icons @fortawesome/free-brands-svg-icons

// if you have pro enabled and an .npmrc
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/free-light-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/free-brands-svg-icons

We’ve installed the packages, but haven’t used them in our application or added them to our app bundles just yet. Let’s look at how we can do that now.

Creating an Icon Library

It can be tedious to import the icon you want into multiple files. Let’s say you use the Twitter logo in several places, you don’t want to have to write that multiple times.

To import everything in one place instead of importing each icon into each separate file, we’ll create a Font Awesome library.

Let’s create fontawesome.js in the src folder and then import that into index.js. Feel free to add this file wherever as long as the components you want to use the icons in have access (are child components).

You could even do this right in your index.js or App.js, however it can be better to move this file out since it can get large:

fontawesome.js
// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-regular-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

If you did this in its own file, then you’ll need to import into index.js:

index.js
import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import 'fontawesome';

render(<App />, document.getElementById('root'));

Importing an Entire Icon Package

This isn’t recommended because you’re importing every single icon into your app. Bundle size could get large but if you’re so inclined, you can import everything from a package.

Let’s say you wanted all the brand icons in @fortawesome/free-brands-svg-icons:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab represents the entire brands package.

Importing Icons Individually

The recommended way to use Font Awesome icons is to import them one by one so that your final bundle sizes are as small as possible. Only use what you need.

You can create a library from multiple icons from the different packages like so:

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Importing the Same Icon from Multiple Styles

If you want all the types of boxing-glove for the fab, fas, and fal packages, you can import them all as a different name and then add them.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/regular-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/solid-light-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

You can then use them by implementing the different prefixes:

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

Using Icons

Now that you have installed what you need and have added your icons to your Font Awesome library, let’s use them and size them. In this tutorial we’ll use the light (fal) package:

// normal size
<FontAwesomeIcon icon={['fal', 'code']} />

// named sizing
<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

// numbered sizing (up to 6)
<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

// decimal sizing
<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome styles the SVGs it uses by taking the text-color of the CSS. If you were to place a <p> tag where this icon were to go, the color of the paragraph would be the color of the icon:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome has a power transforms feature where you can string together different transforms.

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

You can use any of the transforms found on the Font Awesome site. You can use this to move icons up/down/left/right to get the positioning perfect next to text or inside of buttons.

Fixed Width Icons

When using icons in a spot where they all need to be the same width and uniform, Font Awesome lets us use the fixedWidth prop. For instance, we needed fixed widths for our navigation dropdown:

Scotch website with menu dropdown and "Courses" highlighted

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

Spinning Icons

Spinning is useful to implement on form buttons when a form is processing. You can use the spinner icon to make a nice loading effect:

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

You can use the spin prop on anything!

<FontAwesomeIcon icon={['fal', 'code']} spin />

Advanced: Masking Icons

Font Awesome allows you to combine two icons to make effects with masking. You define your normal icon and then use the mask prop to define a second icon to lay on top. The first icon will be constrained within the masking icon.

We created our Tag Filters using masking:

Tag filters with Font Awesome

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Notice how you can chain together multiple transform props to move the inner icon to fit inside the masking icon.

We even colorize and change out the background logo with Font Awesome:

The Tag filters again, but now with a blue background

Using react-fontawesome and Icons Outside of React

If your entire site isn’t a single-page-app (SPA), and instead you have a traditional site and have added React on top. To avoid importing the main SVG/JS library and also the react-fontawesome library, Font Awesome has created a way to use the React libraries to watch for icons outside of React components.

If you have any <i class="fas fa-stroopwafel"></i> , we can tell Font Awesome to watch and update those using:

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver’s are a web technology that allow us to watch the DOM for changes performantly. Find out more about this technique on the React Font Awesome docs.

Conclusion

Using Font Awesome and React together is a great pairing, but creates the need to use multiple packages and consider different combinations. In this tutorial you explored some of the ways you can use Font Awesome and React together.

0 Comments

Creative Commons License