如何在Chrome扩展程序中使用fontawesome？ [英] How to use fontawesome in Chrome Extension?

问题描述

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

I am developing a Google Chrome Extension that is displayed on a specific website. And I want to use Fontawesome in my chrome extension. When I try to load fonts, the error GET chrome-extension://invalid/ net::ERR_FAILED occured.

在样式表中，像这样的 @ font-face 中包含了网络字体。

In the stylesheet, webfonts are included with @font-face like this.

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

我也尝试直接嵌入我的扩展程序ID，尽管它不起作用。

I also tried to embed my extension id directly, though it doesn't work.

我的manifest.json：

My manifest.json:

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

如何解决这个问题？

推荐答案

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

This is how I managed to get a local (offline) instance of fontawesome (4.7) in my chrome extension:

1）下载字体文件（ FontAwesome.otf ， fontawesome-webfont.eot ， fontawesome-webfont.svg ， fontawesome- webfont.ttf ， fontawesome-webfont.woff ， fontawesome-webfont.woff2 ） fonts /

1) Download font files (FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff, fontawesome-webfont.woff2) to fonts/

2）下载 font-awesome.min.css 到 css / 并替换此文件中的所有URL chrome-extension：// __ MSG _ @@ extension_id __ / fonts / [...] 。

2) Download font-awesome.min.css to css/ and replace all urls in this file 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）。

This makes fontawesome available offline (you don't need any fontawesome-js for this).

这篇关于如何在Chrome扩展程序中使用fontawesome？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！