1

I've been struggling with this for a while, so thought it was time to post here, as none of the similar questions helped.

I've tried a few things so far. Font awesome version (5.0.9)

1) include fontawesome-all.min.css to the contentscript, and modify the @font-face urls in the css file to suit the chrome extension path.

"content_scripts": [
{
  "matches": ["http://*/*", "https://*/*"],
  "js": ["contentscript.js"],
  "css": ["assets/css/fontawesome-all.min.css"]
}
],
"permissions": [
    "cookies", "tabs", "notifications", "storage", "identity", "<all_urls>"
],
 "web_accessible_resources": [
    "modal.html", "style.css", "assets/images/*", "assets/css/*", "assets/webfonts/*", "assets/js/*"
]

Here's an example of how one of the @font-face urls look like.

@font-face{font-family:Font Awesome\ 5 Pro;font-style:normal;font-weight:300;src:url(chrome-extension://<extension_id>/assets/webfonts/fa-light-300.woff2) format("woff2")}

When I do this, it seems the fontawesome-all.min.css is not loaded at all, when I look at the Networks tab.

2) Include css file in contentscript.js (CSS is loaded but not the icon fonts)

// Add Fontawesome library
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('assets/css/fontawesome-all.min.css');
    shadow.appendChild(link);

As mentioned, this shows the "square" icons, but not the correct ones. I can also see that the css file is loaded in the Networks tab, however, the icon fonts are still not being loaded. Why?

I'm loading this inside a Shadow DOM, in case that should have anything to do with it..

Tried to load the font file from the contentscript as well, but still didn't work, I'm thinking it could have something to do with the resource not being under the "web_accessible_resources", but they are.. so I'm lost.

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: Font Awesome\ 5 Brands; font-style: normal; font-weight: 400; src: url('
        + chrome.extension.getURL('assets/webfonts/fa-brands-400.woff2')
        + ')}';
    shadow.appendChild(fa);
Anders
  • 513
  • 2
  • 10
  • 32
  • Uhh.. Not quite sure what I did, but it seems to be working now.. lol – Anders Jun 01 '18 at 08:51
  • Ok.. So it seems, when I both add the fontawesome-all.min.css to both manifest.json and inject it through the contentscript then it works. – Anders Jun 01 '18 at 08:56
  • Check my answer in https://stackoverflow.com/questions/41237548/how-to-use-fontawesome-in-chrome-extension/54957601#54957601 – Thomas Kekeisen Mar 02 '19 at 10:40

0 Answers0