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

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 3

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"]
        }
    ],
}