如何在 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的完整路徑