如何在Chrome扩展程序中使用fontawesome？

Question

我正在开发一个显示在特定网站上的Google Chrome扩展程序.我想在我的chrome扩展中使用Fontawesome.当我尝试加载字体时,GET chrome-extension://invalid/ net::ERR_FAILED发生错误.

在样式表中,webfonts包含在@font-face这样的内容中.

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

我也尝试直接嵌入我的扩展ID,虽然它不起作用.

我的manifest.json:

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

怎么解决这个？

Answer 1

这就是我设法在我的 chrome 扩展中获得 fontawesome (4.7) 的本地（离线）实例的方法：

1) 下载字体文件 ( FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff, fontawesome-webfont.woff2) 到fonts/

2）下载font-awesome.min.css到css/和替换所有的URL在这个文件chrome-extension://__MSG_@@extension_id__/fonts/[...]。

3）manifest.json像这样更新：

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

这使得 fontawesome 可以离线使用（你不需要任何 fontawesome-js）。

Answer 2

我想添加@Thomas Kekeisen 的答案，并为 FontAwesome 的第 5 版（当前版本为 5.13.0）提供更新的答案。
另外，我想尽可能减少事情的发生，因此：

1. 我只会参考woff2，因为没有理由使用另一种格式。
2. 我只会参考 FontAwesome 的regular风格（这是他们的5 种风格之一）。

因此，如果您使用的不是 的格式woff2，或者不是的样式regular，只需以相同的方式对其应用以下内容。

因此，为了在 Chrome 扩展程序中使用 FontAwesome，请执行以下操作：

1. 下载 FontAwesome .zip 文件（这是一个直接下载链接，您可以在此处访问下载页面）。

2. 解压缩 .zip，并只获取需要的内容，在我们的示例中是：

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

   注意：如果您使用的是css/all.min.js，它会同时替换 (a) 和 (b)。

3. 可选，会让我们的生活更轻松：

   在您的 Chrome 扩展根文件夹下，创建文件夹css并webfonts模仿 FontAwesome 结构，并将上面列出的文件移动到这些文件夹中。
   您的文件夹结构应如下所示：

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

4. 在里面css/regular.min.css，使用以下内容覆盖（是的，只需覆盖它）@font-face媒体样式：

   @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");
   }
   

   注意：让我再次提醒，我以regular样式为例，因此如果您使用其他样式，请确保该@font-face.src属性具有正确的值。

5. 更新您的manifest.json如下：

   {
     ...
     "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/*" 
     ]
   }
   

   注意：需要将.css路径添加到"content_scripts"和 中"web_accessible_resources"。

Answer 3

最简单但可怕的方法是下载 Fontawesome 并直接包含它

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

然后将其添加到需要的地方

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