[英]How to use fontawesome in Chrome Extension?
I am developing a Google Chrome Extension that is displayed on a specific website.我正在开发一个显示在特定网站上的 Google Chrome 扩展程序。 And I want to use Fontawesome in my chrome extension.
我想在我的 chrome 扩展中使用 Fontawesome。 When I try to load fonts, the error
GET chrome-extension://invalid/ net::ERR_FAILED
occured.当我尝试加载 fonts 时,出现错误
GET chrome-extension://invalid/ net::ERR_FAILED
。
In the stylesheet, webfonts are included with @font-face
like this.在样式表中,webfonts 像这样包含在
@font-face
中。
src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');
I also tried to embed my extension id directly, though it doesn't work.我也尝试直接嵌入我的扩展 ID,尽管它不起作用。
My manifest.json:我的清单.json:
"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],
How to solve this?如何解决这个问题?
This is how I managed to get a local (offline) instance of fontawesome (4.7) in my chrome extension:这就是我设法在我的 chrome 扩展中获得 fontawesome (4.7) 的本地(离线)实例的方法:
1) Download font files ( FontAwesome.otf
, fontawesome-webfont.eot
, fontawesome-webfont.svg
, fontawesome-webfont.ttf
, fontawesome-webfont.woff
, fontawesome-webfont.woff2
) to fonts/
1) 下载字体文件(
FontAwesome.otf
、 fontawesome-webfont.eot
、 fontawesome-webfont.svg
、 fontawesome-webfont.ttf
、 fontawesome-webfont.woff
、 fontawesome-webfont.woff2
)到fonts/
2) Download font-awesome.min.css
to css/
and replace all urls in this file chrome-extension://__MSG_@@extension_id__/fonts/[...]
. 2) 将
font-awesome.min.css
下载到css/
并替换此文件中的所有 url chrome-extension://__MSG_@@extension_id__/fonts/[...]
。
3) Update your manifest.json
like this: 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",
]
}
This makes fontawesome available offline (you don't need any fontawesome-js for this).这使得 fontawesome 可以离线使用(你不需要任何 fontawesome-js)。
I'd like to add upon @Thomas Kekeisen answer with an updated answer for version 5 (current version is 5.13.0) of FontAwesome.我想添加@Thomas Kekeisen 的答案,并为 FontAwesome 的第 5 版(当前版本为 5.13.0)提供更新的答案。
Also, I'd like to keep things as minimal as possible, and so:另外,我想尽可能减少事情的发生,因此:
woff2
, since there's no reason to use another format .woff2
,因为没有理由使用其他格式。regular
style (this is one of their 5 styles ).regular
样式(这是他们的5 种样式之一)。 Therefore, if you're using a format other than woff2
, or a style other than regular
, just apply the following to it in the same way.因此,如果您使用
woff2
以外的格式,或regular
以外的样式,只需以相同的方式对其应用以下内容。
So, in order to use FontAwesome in Chrome extensions, do as follows:因此,为了在 Chrome 扩展程序中使用 FontAwesome,请执行以下操作:
Extract the .zip, and only take what's needed, which in our example are:解压缩 .zip,并只获取需要的内容,在我们的示例中是:
(a) css/fontawesome.min.css
(a)
css/fontawesome.min.css
(b) css/regular.min.css
(b)
css/regular.min.css
(c) webfonts/fa-regular-400.woff2
(c)
webfonts/fa-regular-400.woff2
Note: If you're using css/all.min.js
, it replaces both (a) and (b).注意:如果您使用
css/all.min.js
,它会同时替换 (a) 和 (b)。
Optional, and would make our life easier :可选,会让我们的生活更轻松:
Under your Chrome extension root folder, create the folders css
and webfonts
to mimic FontAwesome structure, and move the files listed above into these folders.在您的 Chrome 扩展根文件夹下,创建文件夹
css
和webfonts
以模仿 FontAwesome 结构,并将上面列出的文件移动到这些文件夹中。
Your folder structure should look as follows:您的文件夹结构应如下所示:
your-extension |- css |- fontawesome.min.css |- regular.min.css |- webfonts |- fa-regular-400.woff2
Inside css/regular.min.css
, override (yes, just override it) @font-face
media style with the following:在
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"); }
Note: Let me remind again that I refer to the regular
style as an example, so if you're using another style, make sure the @font-face.src
property has the correct value .注意:让我再次提醒,我以
regular
样式为例,因此如果您使用其他样式,请确保@font-face.src
属性具有正确的值。
Update your manifest.json
as follows:更新您的
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/*" ] }
Note: it's needed to add the .css
paths into both "content_scripts"
and "web_accessible_resources"
.注意:需要将
.css
路径添加到"content_scripts"
和"web_accessible_resources"
。
The simplest, yet terrible, way is to download Fontawesome and include it directly最简单但可怕的方法是下载 Fontawesome 并直接包含它
curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"
and then add it where you need it然后将其添加到您需要的地方
<script src="fontawesome.js"></script>
If you need to use Font Awesome a Chrome Extension's content script (not the popup.html), you can do the following:如果您需要使用 Font Awesome 作为 Chrome 扩展的内容脚本(不是 popup.html),您可以执行以下操作:
Download https://use.fontawesome.com/840a321d95.js
, rename it to fontawesome.js
and include it in your extension's directory as described in @wesdotcool's answer.下载
https://use.fontawesome.com/840a321d95.js
,将其重命名为fontawesome.js
并将其包含在您的扩展目录中,如@wesdotcool 的回答中所述。
Then add the following to manifest.json
:然后将以下内容添加到
manifest.json
:
{
"manifest_version": 2,
"content_scripts": [
{
"js": ["fontawesome.js"]
}
],
}
I successfully was able to use Font Awesome using Sass in my chrome extension.我成功地在我的 chrome 扩展中使用 Sass 使用了 Font Awesome。
Steps to integrate FontAwesome 5.11.x
in your chrome extension using sass:使用 sass 将
FontAwesome 5.11.x
集成到您的 chrome 扩展中的步骤:
SCSS
folder into your styles folder.SCSS
文件夹复制到您的样式文件夹中。webfonts
folder into assets folder.webfonts
文件夹复制到 assets 文件夹中。scss/variables.scss
and edit the $fa-font-path
variable to point to where you placed the webfonts folder.scss/variables.scss
并编辑$fa-font-path
变量以指向您放置 webfonts 文件夹的位置。 You'll need to use chrome-extension://__MSG_@@extension_id__/
to find the path of the extension folder.您需要使用
chrome-extension://__MSG_@@extension_id__/
来查找扩展文件夹的路径。
For me the path to font files were - extension/chrome/assets/font-awesome
, so I changed $fa-font-path
to chrome-extension://__MSG_@@extension_id__/assets/font-awesome
.对我来说,字体文件的路径是 -
extension/chrome/assets/font-awesome
,所以我将$fa-font-path
更改$fa-font-path
chrome-extension://__MSG_@@extension_id__/assets/font-awesome
。
@import "scss/fontawesome.scss"
in your main SCSS file.@import "scss/fontawesome.scss"
来导入 Font Awesome。 Also, import one or more styles @import "scss/solid.scss"
in your main SCSS file.@import "scss/solid.scss"
。 If you're using regular font, then import regular.scss
.regular.scss
。 Execute your web extension and you should be able to use font awesome icons.执行你的网络扩展,你应该能够使用字体真棒图标。
None of the above worked for me.以上都不适合我。 It may be because all the answers are outdated since they refer to older versions of Font Awesome.
这可能是因为所有答案都已过时,因为它们引用了旧版本的 Font Awesome。 I solved it when I found what Font Awesome 6 suggests on their official website .
当我 在他们的官方网站上找到 Font Awesome 6 的建议时,我解决了这个问题。
css/all.css
, css
is a folder inside the one you just extracted.css/all.css
, css
是您刚刚提取的文件夹中的一个文件夹。<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
Note: Make sure to insert the correct path.注意:确保插入正确的路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.