CODEWITHSUNDEEP
htmlcssgoogle-chromefont-awesome
user1943020
user1943020

Reputation:

font awesome icons not always displaying in the latest Google Chrome Version 32.0.1700.76 m

I am using the latest Google Chrome. As soon as it was released I noticed that some of the font-awesome icons do not show correctly. Instead I just see a square box. This does not change even after all the page has loaded and I wait one minute. When I hover over them then the icons appear.

This can be seen by going to the following URL:

http://fontawesome.io/icons/

Is anyone else noticing this. I assume it effects everyone who has the new browser. Note that one day it works and shows them all, the next day there are some icons I don't see. Maybe it's an issue with timing. I have a fairly slow connection.

Upvotes: 11

Views: 15237

Answers (5)

Swapna Taru
Swapna Taru

Reputation: 688

For icons issue you can add the following code under .htaccess file or index.php file.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Upvotes: 0

Javier V&#233;lez
Javier V&#233;lez

Reputation: 436

It seems that the problem deals with some chrome extensions. In my case I have disabled Adblock Plus and all icons are shown now.

Upvotes: 3

Dylan Valade
Dylan Valade

Reputation: 5605

I saw icons in some browsers and machines but not on others. After trying moving markup around, ensuring fa fa-* classes were on each i tag and confirming html5shiv.js was included at the end of the DOM, I simply changed the CSS to use the CDN and it worked. This upgraded me from version 4.1 to 4.2.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Upvotes: 0

user3550138
user3550138

Reputation: 131

place !important

[class^="fi-"], [class*=" fi-"] {
    font-style: normal;
    font-family: foundation-icons !important;
    -webkit-font-smoothing: antialiased;
}

Upvotes: -2

medina
medina

Reputation: 776

This seems to be a bug using Chrome in a Windows machine. Reorder the font formats in your @font-face so that WOFF is placed before TTF and SVG.

SVG fonts render better in the browsers that support them. Therefore you should put them first by default.

Upvotes: 2

Related Questions