How to use fontawesome in Chrome Extension?

问题

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?

回答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).

回答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>

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

回答4:

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:

First go to fontawesome.com, signup/signin and then create your CDN kit
Find other methods to use Font Awesome and select Sass
Find the link to download the copy of the web-specific files.
Copy the SCSS folder into your styles folder.
Copy the entire webfonts folder into assets folder
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 used $fa-font-path as chrome-extension://__MSG_@@extension_id__/assets/font-awesome

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.

Compile your code and you should be able to use font awesome.

Thanks.

来源：https://stackoverflow.com/questions/41237548/how-to-use-fontawesome-in-chrome-extension

标签

css

google-chrome

google-chrome-extension

font-awesome