CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extensionfont-awesome
Daisuke SHIBATO
Daisuke SHIBATO

Reputation: 1013

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?

Upvotes: 16

Views: 12097

Answers (8)

Michael Libman
Michael Libman

Reputation: 1

Add the following line to your manifest: "content_security_policy": "script-src 'self' https://kit.fontawesome.com/[FILE_NAME].js; object-src 'self'"

Refresh your extension.

Edit: This method doesn't seem to work for Manifest V3

Upvotes: 0

Jenesepados
Jenesepados

Reputation: 1

My use case is the following, I am adding icons to one page, not to the popup, to the page where I am generating divs, and buttons, and text, and stuff.

I finally did it by just appending a <script element containing the fontawesome.js to the page where my extension was adding the icons.

if(!document.getElementById("fontawesome_styling_script")){
        const script = document.createElement("script");
        script.id = "fontawesome_styling_script"
        script.src = "https://kit.fontawesome.com/name_of_file.js";
        script.crossOrigin = "anonymous";
        document.querySelector("head").appendChild(script);
    }

Get the .js file by creating a kit in the fontawesome webpage.

I tried everything before this and it just worked, I have only tested it with one page, so it might not work for other cases, but I'll leave it here in case it helps somebody else.

Upvotes: 0

Leonardo Boscolo
Leonardo Boscolo

Reputation: 467

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:

<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:

Upvotes: 3

OfirD
OfirD

Reputation: 10460

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".

Upvotes: 18

vikrantnegi
vikrantnegi

Reputation: 2472

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.

  1. 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.

Upvotes: 1

Thomas Kekeisen
Thomas Kekeisen

Reputation: 4406

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

Upvotes: 10

stephenspann
stephenspann

Reputation: 1843

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

Upvotes: 3

wesdotcool
wesdotcool

Reputation: 495

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>

Upvotes: 2

Related Questions