blocks|key|1898574|text|如果你是你自己的服务器的所有者，你可以添加一个http头来解决这个问题。基于跨域策略的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1898575|foo.com/font-awesome.woff|1898576|boo.com/index.htm|1898577|在这种情况下，您应该将标头添加到foo.com|1898578|Access-Control-Allow-Origin+=+"http://boo.com"|code-block|syntax|javascript|1898579|或|1898580|Access-Control-Allow-Origin+=+"*"|1898581|这将使您的字体文件可以从其他站点或特定站点访问。|1898582|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

If you are the owner of your own server, you can add a http header to deal with that problem. Problem based on cross domain policies.

foo.com/font-awesome.woff

boo.com/index.htm

in that case you should add that header to foo.com

<pre><code>Access-Control-Allow-Origin = "http://boo.com"
</code></pre>

or

<pre><code>Access-Control-Allow-Origin = "*"
</code></pre>

that will make your font file reachable from other sites or specific site.

blocks|key|1898649|text|要使字体样式表在本地工作，解决方案是将Fonts文件夹下的文件包含到与.html文件(页面)相同的目录中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1898650|例如:到目前为止，fontawesome无法工作的文件结构|1898651|++++prototype\pages\.html+files
++++prototype\styles\font-awesome\css\font-awesome.min.css
++++prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff|code-block|syntax|javascript|1898652|这里的问题是，对于从file://+URI加载的页面，只有文件系统的同一目录中(或以下)的文件才被视为“同源”，因此将字体放在不同的子树(../+restrictions.As+/)中意味着它将被安全策略阻止“默认情况下Firefox禁用跨域字体”。相反，请更改文件结构，如下所示：|1898653|++++++prototype\pages\.html+files
++++++prototype\styles\font-awesome\css\font-awesome.min.css
+++++prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff|1898654|将fonts文件夹放在pages目录下，它可以修复它所帮助的issue.Hope。|1898655|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

solution to make the fontawesome css work locally is to include the files under Fonts folder into the same directory of .html files(pages).

eg:File structure as of now where fontawesome is not working

<pre><code> prototype\pages\.html files
 prototype\styles\font-awesome\css\font-awesome.min.css
 prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
</code></pre>

The issue here is that for a page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions.As Firefox disables cross-domain fonts "by default.
Instead change the file structure as below:

<pre><code> prototype\pages\.html files
 prototype\styles\font-awesome\css\font-awesome.min.css
 prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff
</code></pre>

place the fonts folder under pages directory which fixes the issue.Hope it helps.

blocks|key|1685119|text|在自定义CSS中添加以下内容(对我来说，它解决了问题)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1685120|@font-face
{
++font-family:'FontAwesome';
++src:url('./fontawesome-webfont.eot');
++src:url('./fontawesome-webfont.eot?#iefix')+format('embedded-opentype'),
++url('./fontawesome-webfont.woff')+format('woff'),
++url('./fontawesome-webfont.ttf')+format('truetype'),
++url('./fontawesome-webfont.svg#FontAwesome')+format('svg');
++font-weight:normal;
++font-style:normal
}

[class%5E="icon-"]:before,
[class*="+icon-"]:before
{
++font-family:FontAwesome;
++font-weight:normal;
++font-style:normal;
++display:inline-block;
++text-decoration:inherit
}|code-block|syntax|javascript|1685121|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Put in a custom CSS the following (for me it solved the problem):

<pre class="lang-css prettyprint-override"><code>@font-face
{
 font-family:'FontAwesome';
 src:url('./fontawesome-webfont.eot');
 src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
 url('./fontawesome-webfont.woff') format('woff'),
 url('./fontawesome-webfont.ttf') format('truetype'),
 url('./fontawesome-webfont.svg#FontAwesome') format('svg');
 font-weight:normal;
 font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
 font-family:FontAwesome;
 font-weight:normal;
 font-style:normal;
 display:inline-block;
 text-decoration:inherit
}
</code></pre>

blocks|key|1685126|text|some-class-name:before
{
++content:+attr(\f021);
}+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1685127|对我很管用|unstyled|1685128|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>some-class-name:before
{
 content: attr(\f021);
} 
</code></pre>
worked for me

Related question <a href="https://stackoverflow.com/questions/10638476/font-awesome-not-displaying-properly-on-firefox">here</a>. 

Boris' answer to the above question seems to make sense, but I installed the Font Awesome files on my server and the problem remains:

<img src="https://i.stack.imgur.com/7rrAj.png" alt="enter image description here">

I looked into the library and found that the font files are included in the install, so the argument about cross-server access to fonts doesn't seem valid. I don't mind using the BootstrapCDN, but then Boris' suggestion seems to apply, and I don't know how to send the right CORS headers. (I tried it, but it doesn't work either.) Any idea how I can fix this, either using the "Bootstrap CDN" or the "default CSS"? (see also <a href="http://fontawesome.io/get-started/" rel="noreferrer">these instructions</a>.)

<hr>

PS: IE10 shows the glyph correctly.

FontAwesome doesn't display in Firefox

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

相关问题。Boris对上述问题的回答似乎是有道理的，但我在服务器上安装了Font Awesome文件，问题仍然存在：​​我查看了这个库，发现字体文件包含在安装中，所以关于跨服务器访问字体的争论似乎是无效的。我不介意使用BootstrapCDN，但是Boris的建议似乎适用，我不知道如何发送正确的CORS头。(我试过了，...

问FontAwesome在Firefox中不显示
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FontAwesome在Firefox中不显示EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FontAwesome在Firefox中不显示
EN