How to set up Font Awesome 6 in you Chrome extension

Using Font Awesome is a quick and painless experience on the web, and yet for Chrome Extension devs we know that using any external dependencies can be a pain. While Manifest v3 (MV3) has added some complexities, in terms of imports I’ve actually found it easier to manage, especially in terms of using and upgrading Font Awesome.

Why use Font Awesome 6 in a browser extension?

Font Awesome 6 now has over 7,000 icons, so in terms of bang for buck in a limited extension bundle size, we’re clearly on to a winner here. In my experience, a lot of extensions lack visually pleasing user interfaces, so again I think you’d be foolish to not use something as useful as this font.

For example, Inboxes App is a disposable email browser extension. It’s not exactly a sexy topic. But trying to make the UI as clear as possible, with simple iconography will make the experience much more pleasant and hopefully one which will make them want to share the extension.

Lets get to the code!

You’ll first want to download the latest Font Awesome. In my case it’s version 6.1.1. One extracted, I want to make use of the normal font weight to try keep things minimal.

We’ll need to copy the contents of css/regular.css and put that in to the top of fontawesome.css as this is how we’ll reference the file within the extension. At the end of this, feel free to minimise the file.

Your fontawesome.css should now look a little like this:

/*!
 * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
:root, :host {
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"; }

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
         url("../webfonts/fa-solid-900.woff2") format("woff2"),
}

.far,
.fa-regular {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400; }


.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900); }

... (more)

We’re almost there now!

We’ll first need to reference the font. In your style.css, we’ll want to add something like the following to the body font family:

body {
    font-family: Helvetica,sans-serif, "Font Awesome 6 Free";
}

We’ll then want to copy everything in to your project, something along the lines of:

/css/style.css
/css/fontawesome.css
/webfont/fa-regular-400.woff2
/webfont/fa-solid-900.woff2
/popup.html

At this point, you should be able to reference icons from Font Awesome. If you’re unable to, it might be due to how you reference the webfonts. In this case, I’ve found the following change to fontawesome.css to work well for me:

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");
    src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-solid-900.woff2");
}

This results in the chrome extension putting the full extension path allowing us to call the absolute file path. This shouldn’t be necessary, but it’s handy to know in case you run in to issues.