为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

FontAwesome Webfont loading but not displaying

  • 5 个回答
  • 55 人有此问题
  • 1 次查看
  • 最后回复者为 cmscss

more options

Hi There,

I'm trying to load FontAwesome locally (using MAMP) like this in the head:

<link href="/assets/css/fonts.css" rel="stylesheet" type="text/css">

And fonts.css contains the following (Font Squirrel syntax):

@font-face {

 font-family: 'FontAwesome';
 src: url('/assets/fonts/fontawesome-webfont.eot');
 src: url('/assets/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('/assets/fonts/fontawesome-webfont.woff') format('woff'),
      url('/assets/fonts/fontawesome-webfont.ttf') format('truetype'),
      url('/assets/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;

}


If I inspect an element and click "Fonts" I can confirm that Firefox is actually loading the font - it's just not displaying it (all I see are the unicode characters).

I've tried:

- Disabling all add-ons

- Hard resetting Firefox

- Implementing the .htaccess suggestion

But the font displays in Safari and not in Firefox - I'm totally stumped. The weird thing is that another custom font works in Firefox and if I load FontAwesome from the CDN it works.

I've literally copied the FontAwesome css file from the CDN so I know the class names are correct (plus the FontAwesome classes are being applied) it's just that Firefox won't display the unicode character using the font.

I'm testing the fonts locally first before I create a fallback incase the CDN goes down.

Any pointers in the right direction would be much appreciated.

Cheers

BTW, is there a way to format posts better (code blocks and unordered lists etc)?

Hi There, I'm trying to load FontAwesome locally (using MAMP) like this in the head: <pre> <link href="/assets/css/fonts.css" rel="stylesheet" type="text/css"> </pre> And fonts.css contains the following (Font Squirrel syntax): @font-face { font-family: 'FontAwesome'; src: url('/assets/fonts/fontawesome-webfont.eot'); src: url('/assets/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } If I inspect an element and click "Fonts" I can confirm that Firefox is actually loading the font - it's just not displaying it (all I see are the unicode characters). I've tried: - Disabling all add-ons - Hard resetting Firefox - Implementing the .htaccess suggestion But the font displays in Safari and not in Firefox - I'm totally stumped. The weird thing is that another custom font works in Firefox and if I load FontAwesome from the CDN it works. I've literally copied the FontAwesome css file from the CDN so I know the class names are correct (plus the FontAwesome classes are being applied) it's just that Firefox won't display the unicode character using the font. I'm testing the fonts locally first before I create a fallback incase the CDN goes down. Any pointers in the right direction would be much appreciated. Cheers BTW, is there a way to format posts better (code blocks and unordered lists etc)?

由cmscss于修改

被采纳的解决方案

Thanks guys,

I've just figured out the issue, I'd copied the FontAwesome source from the CDN file that loads in Safari.

I've since downloaded the source from their website and now Firefox works - not sure what was missing but maybe they serve slightly different versions depending on the browser.

Thanks for all the replies and sorry for wasting your time - you guys are a very helpful community.

Cheers

Ben

定位到答案原位置 👍 0

所有回复 (5)

more options

You need to add a local rule if you want Firefox to use the font when installed on the computer.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }
more options

@cor-el: Thanks heaps for the reply but I'm confused sorry.

Isn't the local rule to specify a font installed on the user's OS? Everything I've read (including the recommended Font Squirrel syntax) suggests not doing this to force the browser to use the correct font - i.e. the font on the web server.

Actually, I now see that my post is confusing - when I say local, I mean local to the server and not a CDN.

Does that make sense?

由cmscss于修改

more options

Yes, that makes a difference.
Maybe check the Browser Console (Firefox/Tools > Web Developer;Ctrl+Shift+J) for possible security errors with downloading the font.
Also make sure to use a relative path to the font file.
Otherwise you would have to send HTTP Access Control headers.

more options

Can you provide a link to a page demonstrating this problem?


Users encountering this problem on sites like Yahoo mail and Github often have set Firefox to override site fonts in the Options/Preferences dialog:

(Mac) Firefox menu > Preferences > Content > "Advanced" button
(Win) orange Firefox button (or Tools menu) > Options > Content > "Advanced" button

Clearing the checkbox for "Allow pages to choose their own fonts" will typically yield the tall rectangle with the two rows of two characters each shown in your screen shot.

That might not apply to you, but keep that in mind for any support questions you might get about "images not loading" which is a common way people describe the missing icons.

more options

选择的解决方案

Thanks guys,

I've just figured out the issue, I'd copied the FontAwesome source from the CDN file that loads in Safari.

I've since downloaded the source from their website and now Firefox works - not sure what was missing but maybe they serve slightly different versions depending on the browser.

Thanks for all the replies and sorry for wasting your time - you guys are a very helpful community.

Cheers

Ben