How to use fontawesome in Chrome Extension?

Question

I am developing a Google Chrome Extension that is displayed on a specific website. And I want to use Fontawesome in my chrome extension. When I try to load fonts, the error GET chrome-extension://invalid/ net::ERR_FAILED occured.

In the stylesheet, webfonts are included with @font-face like this.

src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');

I also tried to embed my extension id directly, though it doesn't work.

My manifest.json:

"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],

How to solve this?

Answer 1

This is how I managed to get a local (offline) instance of fontawesome (4.7) in my chrome extension:

1) Download font files ( FontAwesome.otf , fontawesome-webfont.eot , fontawesome-webfont.svg , fontawesome-webfont.ttf , fontawesome-webfont.woff , fontawesome-webfont.woff2 ) to fonts/

2) Download font-awesome.min.css to css/ and replace all urls in this file chrome-extension://__MSG_@@extension_id__/fonts/[...] .

3) Update your manifest.json like this:

{
    ...
    "content_scripts":          [
        {
           ...
            "css":        [
                "css/font-awesome.min.css",
                ...
            ]
            ...
        }
    ],
    ...
    "web_accessible_resources": [
        ...
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
    ]
}

This makes fontawesome available offline (you don't need any fontawesome-js for this).

Answer 2

I'd like to add upon @Thomas Kekeisen answer with an updated answer for version 5 (current version is 5.13.0) of FontAwesome.
Also, I'd like to keep things as minimal as possible, and so:

1. I will only refer to woff2 , since there's no reason to use another format .
2. I will only refer to FontAwesome's regular style (this is one of their 5 styles ).

Therefore, if you're using a format other than woff2 , or a style other than regular , just apply the following to it in the same way.

---

So, in order to use FontAwesome in Chrome extensions, do as follows:

1. Download FontAwesome .zip file (that's a direct download link, you can visit the download page here ).

2. Extract the .zip, and only take what's needed, which in our example are:

   (a) css/fontawesome.min.css
   (b) css/regular.min.css
   (c) webfonts/fa-regular-400.woff2

   Note: If you're using css/all.min.js , it replaces both (a) and (b).

3. Optional, and would make our life easier :

   Under your Chrome extension root folder, create the folders css and webfonts to mimic FontAwesome structure, and move the files listed above into these folders.
   Your folder structure should look as follows:

    your-extension |- css |- fontawesome.min.css |- regular.min.css |- webfonts |- fa-regular-400.woff2

4. Inside css/regular.min.css , override (yes, just override it) @font-face media style with the following:

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

   Note: Let me remind again that I refer to the regular style as an example, so if you're using another style, make sure the @font-face.src property has the correct value .

5. Update your manifest.json as follows:

    { ... "content_scripts": [{ ... "css": [ "css/fontawesome.min.css", "css/regular.min.css", ] ... }], ... "web_accessible_resources": [ ... "css/fontawesome.min.css", "css/regular.min.css", "webfonts/fa-regular-400.woff2", // or: "webfonts/*" ] }

   Note: it's needed to add the .css paths into both "content_scripts" and "web_accessible_resources" .

Answer 3

The simplest, yet terrible, way is to download Fontawesome and include it directly

curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"

and then add it where you need it

<script src="fontawesome.js"></script> 

Answer 4

If you need to use Font Awesome a Chrome Extension's content script (not the popup.html), you can do the following:

Download https://use.fontawesome.com/840a321d95.js , rename it to fontawesome.js and include it in your extension's directory as described in @wesdotcool's answer.

Then add the following to manifest.json :

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}

Answer 5

I successfully was able to use Font Awesome using Sass in my chrome extension.

Steps to integrate FontAwesome 5.11.x in your chrome extension using sass:

1. Go to Font Awesome Download page to download a local copy of the web-specific files.
2. Copy the SCSS folder into your styles folder.
3. Copy the entire webfonts folder into assets folder.
4. Open the font awesome scss/variables.scss and edit the $fa-font-path variable to point to where you placed the webfonts folder.

You'll need to use chrome-extension://__MSG_@@extension_id__/ to find the path of the extension folder.

For me the path to font files were - extension/chrome/assets/font-awesome , so I changed $fa-font-path to chrome-extension://__MSG_@@extension_id__/assets/font-awesome .

5. Import Font Awesome by adding @import "scss/fontawesome.scss" in your main SCSS file. Also, import one or more styles @import "scss/solid.scss" in your main SCSS file. If you're using regular font, then import regular.scss .

Execute your web extension and you should be able to use font awesome icons.

Answer 6

None of the above worked for me. It may be because all the answers are outdated since they refer to older versions of Font Awesome. I solved it when I found what Font Awesome 6 suggests on their official website .

In short:

• Download the Font Awesome zip File for the web
• Extract everything in your project folder
• Copy the path to get at css/all.css , css is a folder inside the one you just extracted.
• Paste the following in the head of your HTML.

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

Note: Make sure to insert the correct path.

Some great tutorials to get the path of a file:

• Get the full path of a file on Windows
• Get the full path of a file on Linux
• Get the full path on of a file macOS