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

最简单但最糟糕的方式是下载Fontawesome并直接包含它

<div id="q-numbers">
  <div>Defect Incident as of <span id="qval1"></span></div>
  <div class="table">
    <div>
      <div>Days since last escape</div>
      <div>Best Streak
        <br/>(since 4/5/16)</div>
    </div>
    <div>
      <div class="square orange"><span id="qval2">23</span></div>
      <div class="square blue"><span id="qval3">44</span></div>
    </div>
  </div>
</div>

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

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

Answer 2

这是我设法在chrome扩展程序中获取fontawesome（4.7）的本地（脱机）实例的方法：

1）将字体文件（FontAwesome.otf，fontawesome-webfont.eot，fontawesome-webfont.svg，fontawesome-webfont.ttf，fontawesome-webfont.woff，fontawesome-webfont.woff2）下载到{{1} }

2）将fonts/下载到font-awesome.min.css并替换此文件css/中的所有URL。

3）像这样更新您的chrome-extension://__MSG_@@extension_id__/fonts/[...]：

manifest.json

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

Answer 3

我想在@Thomas Kekeisen answer上添加FontAwesome的第5版（当前版本为5.13.0）的更新答案。
另外，我想将内容保持在最小限度，等等：

我只会引用woff2，since there's no reason to use another format。
我只会提及FontAwesome的regular样式（这是他们的5 styles之一）。

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

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

Download FontAwesome .zip file（这是直接下载链接，您可以访问下载页面here）。
解压缩.zip文件，仅提取需要的内容，在我们的示例中为：

（a）css/fontawesome.min.css
（b）css/regular.min.css
（c）webfonts/fa-regular-400.woff2

注意：如果您使用的是css/all.min.js，它将替换（a）和（b）。
可选，它将使我们的生活更轻松：

在您的Chrome扩展程序根文件夹下，创建文件夹css和webfonts以模仿FontAwesome结构，并将上面列出的文件移动到这些文件夹中。
您的文件夹结构应如下所示：
```
your-extension
 |- css
   |- fontawesome.min.css
   |- regular.min.css
 |- webfonts
   |- fa-regular-400.woff2
```
在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属性具有正确的值< / em>。

如下更新您的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 4

如果您需要使用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扩展程序中的步骤：

首先转到fontawesome.com，注册/登录，然后创建您的CDN工具包
找到other methods以使用Font Awesome并选择Sass
找到link以下载特定于网络的文件的副本。
将SCSS文件夹复制到样式文件夹中。
将整个webfonts文件夹复制到资产文件夹
打开很棒的字体scss/variables.scss，然后编辑$fa-font-path变量，以指向放置webfonts文件夹的位置。

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

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

通过在主SCSS文件中添加@import "scss/fontawesome.scss"来导入Font Awesome。另外，在您的主要SCSS文件中导入一种或多种样式@import "scss/solid.scss"。

编译代码，您应该可以使用很棒的字体。

谢谢。

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

5 个答案: