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

Question

我正在开发一个显示在特定网站上的 Google Chrome 扩展程序。 我想在我的 chrome 扩展中使用 Fontawesome。 当我尝试加载 fonts 时，出现错误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，尽管它不起作用。

我的清单.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> 

Answer 4

如果您需要使用 Font Awesome 作为 Chrome 扩展的内容脚本（不是 popup.html），您可以执行以下操作：

下载https://use.fontawesome.com/840a321d95.js ，将其重命名为fontawesome.js并将其包含在您的扩展目录中，如@wesdotcool 的回答中所述。

然后将以下内容添加到manifest.json ：

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}

Answer 5

我成功地在我的 chrome 扩展中使用 Sass 使用了 Font Awesome。

使用 sass 将FontAwesome 5.11.x集成到您的 chrome 扩展中的步骤：

1. 转到Font Awesome 下载页面以下载特定于 Web 的文件的本地副本。
2. 将SCSS文件夹复制到您的样式文件夹中。
3. 将整个webfonts文件夹复制到 assets 文件夹中。
4. 打开字体 awesome scss/variables.scss并编辑$fa-font-path变量以指向您放置 webfonts 文件夹的位置。

您需要使用chrome-extension://__MSG_@@extension_id__/来查找扩展文件夹的路径。

对我来说，字体文件的路径是 - extension/chrome/assets/font-awesome ，所以我将$fa-font-path更改$fa-font-path chrome-extension://__MSG_@@extension_id__/assets/font-awesome 。

5. 通过在主 SCSS 文件中添加@import "scss/fontawesome.scss"来导入 Font Awesome。 此外，在主 SCSS 文件中导入一种或多种样式@import "scss/solid.scss" 。 如果您使用的是常规字体，则导入regular.scss 。

执行你的网络扩展，你应该能够使用字体真棒图标。

Answer 6

以上都不适合我。 这可能是因为所有答案都已过时，因为它们引用了旧版本的 Font Awesome。 当我 在他们的官方网站上找到 Font Awesome 6 的建议时，我解决了这个问题。

简而言之：

• 下载 web 的字体 Awesome zip文件
• 提取项目文件夹中的所有内容
• 复制路径以获取css/all.css ， css是您刚刚提取的文件夹中的一个文件夹。
• 将以下内容粘贴到 HTML 的头部。

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

注意：确保插入正确的路径。

获取文件路径的一些很棒的教程：

• 获取Windows上文件的完整路径
• 获取Linux上文件的完整路径
• 获取文件macOS的完整路径