Jump to content

Archived

This topic is now archived and is closed to further replies.

sheilahoff

Font Awesome anomolies

Recommended Posts

sheilahoff

I just launched my new business site. It was in a subdomain and Font Awesome worked fine. Now it's not in a subdomain. The icon fonts used for my check marks and for the arrows on this page: http://hoffmangraphics.com/services/. They show up in Chrome but in FF I get little error images and in IE I get NOTHING. Any ideas?

 

I also noticed, in checking the fonts, that the font with the check marks is not matching the site's body font. It does in FF but not in Chrome and IE. This must be an Font Awesome thing too.

 

Overall I'm thrilled with my new site. I'm planning to send an newsletter announcing it to my list and would love to resolve these little glitches first, if possible. Thanks.

 

UPDATE: I found this link that explains that FF doesn't allow cross-domain fonts http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default. I've tried adding the recommended code to an htaccess file and put it in wp-content/themes/dms/fonts but it didn't help. What's weird is that it all worked in FF before I launched. And and also doesn't work in IE.

 

FIXED:

adding this to the main .htacess file and clearing cache fixed the missing fonts in both FF & IE.

 

 <FilesMatch ".(eot|ttf|otf|woff)">

        Header set Access-Control-Allow-Origin "*"

    </FilesMatch>

 

HOWEVER.... I still have a different font appearing following the icons then is the main site font. Is there a way to fix that?

 

FINAL UPDATE:

I guess I could just remove this post but it may be helpful to those who come later. I discovered that I'd used the code incorrectly which was causing the odd fonts after the checkmarks.

 

The reason the text after the check marks was displaying a different font is because I was wrapping the whole line in the <i> … </i> class.  the icon class is to display the icon, not to affect the whole line. It should be <i class=“icon-name></i> Your text here.  Make sure to put a space after the closing </i> tag.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

Yeah this just appears to be pilot error, you shouldn't use the <i> tag the way you were.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

Yes, I admitted to the pilot error. But I thought the first part was useful as it was necessary to add that to the htaccess in order for Font Awesome to work in FF.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

Yeah we appreciate you sharing this.

 

FYI, the issue is related to FireFox and IE following the Cross-Origin Resource Sharing (CORS) security policy where as Safari and Chrome do not, for this very reason. You can find out more information here - https://developers.google.com/storage/docs/cross-origin

http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×