My glyphicons are broken in Chrome - why?

Question

I am building a site for a client, based on a template. The template uses the Bootstrap framework which utilizes Glyphicons for some images. If I go to the BootStrap homepage in Chrome, the Glyphicons seem to work fine.

Here is the page that is not working for me: http://www.laidoffsoftware.com/Contact.aspx

If you look at the icons under the ADDRESS section, you should see a phone icon next to the phone number, and an envelope icon next to the email address. In FF, IE or Opera, this looks fine. In Chrome however, the icons are broken, They are some weird symbols.

I am at a loss as to why this is happening?

Any ideas are appreciated.

UPDATE: Chrome console is showing this now:

Viewport argument value "100%" for key "width" was truncated to its numeric prefix.

Contact.aspx:8 Resource interpreted as Font but transferred with MIME type font/x-woff: "http://www.laidoffsoftware.com/font/fontawesome-webfont.woff".

Contact.aspx:290 Resource interpreted as Font but transferred with MIME type image/svg+xml: "http://www.laidoffsoftware.com/font/IcoMoon.svg".

@font-face {
    font-family: 'IcoMoon';
    src: url('../font/IcoMoon.eot');
    src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
    url('../font/IcoMoon.svg#IcoMoon') format('svg'),
    url('../font/IcoMoon.woff') format('woff'),
    url('../font/IcoMoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
    content: attr(data-icon);
    speak: none; }

/* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before {font-family: 'FontAwesome', 'IcoMoon';
    font-style: normal;
    speak: none; } .icon-home:before {content: "\0021";} .icon-home-2:before {content: "\0022";} .icon-home-3:before {content: "\0023";} .icon-newspaper:before {content: "\0024";}

Answer 1

It looks like this is a bug in WebKit, which has been reported here: https://bugs.webkit.org/show_bug.cgi?id=76152

Also, the creator of GlyphIcons says he is aware of this issue and will try to use different unicode values in the next release to get around this bug: https://twitter.com/glyphicons/status/423426740128854016

Answer 2

I think figured out the answer, although I'm not 100% sure why this works. See the above CSS code, I made this change...

url('../font/IcoMoon.svg#IcoMoon') format('opentype'),

Answer 3

You have to set font urls relative to extension path. So you need to change this

@font-face {
font-family: 'IcoMoon';
src: url('../font/IcoMoon.eot');
src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../font/IcoMoon.svg#IcoMoon') format('svg'),
url('../font/IcoMoon.woff') format('woff'),
url('../font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }

to

@font-face {
font-family: 'IcoMoon';
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot');
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.svg#IcoMoon') format('svg'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.woff') format('woff'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }chrome-extension://__MSG_@@extension_id__/

and include you css in manifest file like that: "css": ["/css/mystyle.css"]

Answer 4

Look in the console. You have some error going on on all pages: Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

First fix that, then see if this resolves an issue and if not - dig dipper

UPDATE

Another thing I just checked: Twitter Bootstrap does not provide default glyph with class icon-phone: http://twitter.github.com/bootstrap/base-css.html#icons

You can use a custom icon created by you or taken from other source, but you need to write css for it.