DEV Community

Joe Attardi
Joe Attardi

Posted on • Originally published at joeattardi.codes

How to use Font Awesome icons in a vanilla JavaScript project

This was originally posted on my blog.

I was working on a vanilla JavaScript project recently and wanted to add some Font Awesome icons. Previously I have used Font Awesome icons in React or Angular projects, but never plain JavaScript. It turned out to be pretty easy.

Install packages

First, install the packages needed. The fontawesome-svg-core package is required. Beyond that, you only need to install the icon packages containing the icons you want to use. For this example, we'll install both the regular and the solid icons.

npm install --save @fortawesome/fontawesome-svg-core \
                   @fortawesome/free-regular-svg-icons \
                   @fortawesome/free-solid-svg-icons
Enter fullscreen mode Exit fullscreen mode

Use the icons

There are two things you'll need to import from @fortawesome/fontawesome-svg-core:

  • library: A generic collection of icons. Icons must be added to the library before they can be used.
  • icon: A function that generates the icon data.
import { library, icon } from '@fortawesome/fontawesome-svg-core';
Enter fullscreen mode Exit fullscreen mode

Next, import the icons you want and add them to the library:

import { faCat } from '@fortawesome/free-solid-svg-icons';

library.add(faCat);
Enter fullscreen mode Exit fullscreen mode

Now we can create the icon data that contains, among other things, the SVG markup to insert into the DOM. You'll need to pass two pieces of information to the icon function:

  • prefix: The icon prefix, determined by which icon collection the icon is in (solid or regular). Usually this will be fas for solid or far for regular.
  • iconName: The name of the icon (without the fa prefix).

These options are passed as an object to the icon function. The returned object has an html property that contains the markup we're looking for. We can then add this markup to the DOM:

const iconContainer = document.createElement('span');
iconContainer.innerHTML = icon({ prefix: 'fas', iconName: 'cat' }).html;
Enter fullscreen mode Exit fullscreen mode

Now iconContainer can be added to the document, and you will have a cat icon in your page!

someDiv.appendChild(iconContainer);
Enter fullscreen mode Exit fullscreen mode

Here's a more substantial example. In my project emoji-button, I have all my icons in a single file that gets imported wherever icons are needed. My icon set includes icons from both the solid and the regular libraries.

import { library, icon } from '@fortawesome/fontawesome-svg-core';
import { faCat, faCoffee, faFutbol, faHistory, faMusic, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
import { faBuilding, faFlag, faFrown, faLightbulb, faSmile } from '@fortawesome/free-regular-svg-icons';

library.add(
  faBuilding,
  faCat,
  faCoffee,
  faFlag,
  faFrown,
  faFutbol,
  faHistory,
  faLightbulb,
  faMusic,
  faSearch,
  faSmile,
  faTimes
);

export const building = icon({ prefix: 'far', iconName: 'building' }).html;
export const cat = icon({ prefix: 'fas', iconName: 'cat' }).html;
export const coffee = icon({ prefix: 'fas', iconName: 'coffee' }).html;
export const flag = icon({ prefix: 'far', iconName: 'flag' }).html;
export const futbol = icon({ prefix: 'fas', iconName: 'futbol' }).html;
export const frown = icon({ prefix: 'far', iconName: 'frown' }).html;
export const history = icon({ prefix: 'fas', iconName: 'history' }).html;
export const lightbulb = icon({ prefix: 'far', iconName: 'lightbulb' }).html;
export const music = icon({ prefix: 'fas', iconName: 'music' }).html;
export const search = icon({ prefix: 'fas', iconName: 'search' }).html;
export const smile = icon({ prefix: 'far', iconName: 'smile' }).html;
export const times = icon({ prefix: 'fas', iconName: 'times' }).html;
Enter fullscreen mode Exit fullscreen mode

Now I can import any of these icons and add them to my UI wherever needed.

Discussion (1)

Collapse
kaos profile image
Kai Oswald

I always found it a bit annoying that you had to manually import every single icon when working with the npm package.

Ofc you have the benefit to only load the icons you really need in the end, but I prefer just working with their css file.