Internet Explorer / Edge woes

255 views
Skip to first unread message

Richard Navone

unread,
Aug 10, 2015, 3:10:06 PM8/10/15
to IcoMoon
Hello people, I'm new.

I am having issues showing any icons whatsoever on my website http://projectcarssetups.eu/#/bycar with any IE (tested on 11 and Edge). Everything works great in Firefox and webkit-based browsers. It's just IE that is refusing to show anything. It doesn't show anything neither in production nor locallly during development.
I am not sure where I am going wrong, as the css is taken straight from the downloaded style.css (just updated the references to the font files themselves) and the demo page works fine in IE/Edge. Any ideas?

PS - LOVE the app! It knocked my socks off!

Keyamoon

unread,
Aug 10, 2015, 3:14:02 PM8/10/15
to IcoMoon
Thanks for the kind words.

Are you seeing the same issue in the generated demo.html?

Richard Navone

unread,
Aug 10, 2015, 3:18:06 PM8/10/15
to IcoMoon
No. The demo.html file shows glyphs with no issues.

If I look in the dev tools, under the Network tab, no font is showing in IE/Edge, whereas it is showing in the Chrome Dev Tools. I'm not sure why IE/Edge wouldn't be loading the font files.

Keyamoon

unread,
Aug 10, 2015, 3:21:41 PM8/10/15
to IcoMoon
Hmm, so if the demo.html shows the glyphs without problem in IE; then maybe you could compare what is different in your own implementation compared to the generated demo?

Richard Navone

unread,
Aug 10, 2015, 4:28:34 PM8/10/15
to IcoMoon
There is no difference, other than the paths to the files. I copy-pasted the whole thing directly from the downloaded file with the exact purpose of minifying the risk of discrepancies =).

Here is the file I am using in my styles:

@font-face {
font-family: 'icomoon';
src:url('/data/icomoon.eot?5dhi9a');
src:url('/data/icomoon.eot?#iefix5dhi9a') format('embedded-opentype'),
url('/data/icomoon.woff?5dhi9a') format('woff'),
url('/data/icomoon.ttf?5dhi9a') format('truetype'),
url('/data/icomoon.svg?5dhi9a#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
content: "\e905";
}

.icon-books:before {
content: "\e920";
}

.icon-file-empty:before {
content: "\e924";
}

.icon-files-empty:before {
content: "\e925";
}

.icon-stack:before {
content: "\e92e";
}

.icon-price-tag:before {
content: "\e935";
}

.icon-tags:before {
content: "\e936";
}

.icon-pushpin:before {
content: "\e946";
}

.icon-download:before {
content: "\e960";
}

.icon-database:before {
content: "\e964";
}

.icon-undo2:before {
content: "\e967";
}

.icon-redo2:before {
content: "\e968";
}

.icon-forward:before {
content: "\e969";
}

.icon-reply:before {
content: "\e96a";
}

.icon-user:before {
content: "\e971";
}

.icon-users:before {
content: "\e972";
}

.icon-spinner:before {
content: "\e97a";
}

.icon-spinner2:before {
content: "\e97b";
}

.icon-spinner3:before {
content: "\e97c";
}

.icon-spinner4:before {
content: "\e980";
}

.icon-spinner5:before {
content: "\e981";
}

.icon-spinner6:before {
content: "\e982";
}

.icon-spinner7:before {
content: "\e984";
}

.icon-search:before {
content: "\e986";
}

.icon-key:before {
content: "\e98d";
}

.icon-key2:before {
content: "\e98e";
}

.icon-lock:before {
content: "\e98f";
}

.icon-unlocked:before {
content: "\e990";
}

.icon-wrench:before {
content: "\e991";
}

.icon-settings:before {
content: "\e992";
}

.icon-equalizer2:before {
content: "\e993";
}

.icon-cog:before {
content: "\e994";
}

.icon-cogs:before {
content: "\e995";
}

.icon-hammer:before {
content: "\e996";
}

.icon-pie-chart:before {
content: "\e99a";
}

.icon-stats-dots:before {
content: "\e99b";
}

.icon-stats-bars:before {
content: "\e99c";
}

.icon-bin:before {
content: "\e9ac";
}

.icon-bin2:before {
content: "\e9ad";
}

.icon-truck:before {
content: "\e9b0";
}

.icon-switch:before {
content: "\e9b6";
}

.icon-list-numbered:before {
content: "\e9b9";
}

.icon-list:before {
content: "\e9ba";
}

.icon-list2:before {
content: "\e9bb";
}

.icon-save:before {
content: "\e9c5";
}

.icon-link:before {
content: "\e9cb";
}

.icon-flag:before {
content: "\e9cc";
}

.icon-eye:before {
content: "\e9ce";
}

.icon-eye-blocked:before {
content: "\e9d1";
}

.icon-bookmark:before {
content: "\e9d2";
}

.icon-bookmarks:before {
content: "\e9d3";
}

.icon-star-empty:before {
content: "\e9d7";
}

.icon-star-full:before {
content: "\e9d9";
}

.icon-heart:before {
content: "\e9da";
}

.icon-happy:before {
content: "\e9df";
}

.icon-happy2:before {
content: "\e9e0";
}

.icon-sad:before {
content: "\e9e5";
}

.icon-sad2:before {
content: "\e9e6";
}

.icon-wondering:before {
content: "\e9fb";
}

.icon-wondering2:before {
content: "\e9fc";
}

.icon-warning:before {
content: "\ea07";
}

.icon-notification:before {
content: "\ea08";
}

.icon-question:before {
content: "\ea09";
}

.icon-plus:before {
content: "\ea0a";
}

.icon-minus:before {
content: "\ea0b";
}

.icon-info:before {
content: "\ea0c";
}

.icon-cancel-circle:before {
content: "\ea0d";
}

.icon-blocked:before {
content: "\ea0e";
}

.icon-cross:before {
content: "\ea0f";
}

.icon-checkmark:before {
content: "\ea10";
}

.icon-enter:before {
content: "\ea13";
}

.icon-exit:before {
content: "\ea14";
}

.icon-loop2:before {
content: "\ea2e";
}

.icon-infinite:before {
content: "\ea2f";
}

.icon-shuffle:before {
content: "\ea30";
}

.icon-arrow-up:before {
content: "\ea32";
}

.icon-arrow-right:before {
content: "\ea34";
}

.icon-arrow-down:before {
content: "\ea36";
}

.icon-arrow-left:before {
content: "\ea38";
}

.icon-arrow-up2:before {
content: "\ea3a";
}

.icon-arrow-right2:before {
content: "\ea3c";
}

.icon-arrow-down2:before {
content: "\ea3e";
}

.icon-arrow-left2:before {
content: "\ea40";
}

.icon-circle-up:before {
content: "\ea41";
}

.icon-circle-right:before {
content: "\ea42";
}

.icon-circle-down:before {
content: "\ea43";
}

.icon-circle-left:before {
content: "\ea44";
}

.icon-sort-amount-asc:before {
content: "\ea4c";
}

.icon-sort-amount-desc:before {
content: "\ea4d";
}

.icon-checkbox-checked:before {
content: "\ea52";
}

.icon-checkbox-unchecked:before {
content: "\ea53";
}

.icon-radio-checked:before {
content: "\ea54";
}

.icon-radio-checked2:before {
content: "\ea55";
}

.icon-radio-unchecked:before {
content: "\ea56";
}

.icon-filter:before {
content: "\ea5b";
}

.icon-embed:before {
content: "\ea7f";
}

.icon-embed2:before {
content: "\ea80";
}


One thing I am thinking of however - I am using Twitter Bootstrap as the backbone of my webapp. Can that somehow be stepping over Icomoon toes in IE?

Keyamoon

unread,
Aug 10, 2015, 5:21:41 PM8/10/15
to IcoMoon
To make sure there are no conflicts with bootstrap, you could change your class prefix before downloading the font pack. In the Font tab, you can modify the class prefix from the Preferences panel.

Richard Navone

unread,
Aug 10, 2015, 5:46:02 PM8/10/15
to IcoMoon
Hmm, I have just tried doing that on my local stack. No dice still =( That's not it. 
Something I have noticed however, is that when I inspect the span element on which the icon sits in Edge, the content: "\e620" (or whatever code it is) string on the ::before pseudo element is struck through. As if there were another style overriding it (there isn't). Is this normal behavior for IE browsers? When I edit the code to something more mundane, like content: "C", the whole thing is still struck through, but the C is shown instead of the icon. This seems to suggest that pseudo elements are just generally struck through in the IE Dev Tools. I'm not 100% certain of it, though, hence the question =).

Keyamoon

unread,
Aug 10, 2015, 5:53:47 PM8/10/15
to IcoMoon
How about in the demo.html? Are those styles struck through there too? I doubt IE Dev tools would do that.

By the way, according the CSS you copied above, "\e620" would be invalid (it's not present in your CSS).

Richard Navone

unread,
Aug 11, 2015, 12:28:09 PM8/11/15
to IcoMoon
Yup, the styles from demo.html are also struck through in the Edge dev tools:


As for the CSS I copied in my previous post, you are correct. "\e620" has no matches in the styles on the live site nor on my local stack. I hit 6, when I meant to hit 9. "\e920" matches .icon-books and is present in both environments. Mishaps of using the numpad, I guess =).



Richard Navone

unread,
Aug 21, 2015, 12:02:31 PM8/21/15
to IcoMoon
So, here are the latest news from the (battle)front!

After being driven relatively insane for a good while by this, I have finally managed to fix the issue. I'm still not sure why the symptoms occur, but at least I managed to make them go away.

My site was scaffolded out using a Yeoman Angular builder and I set it up to use SASS for styling. So, naturally, I put the styles from the downloads package into a .scss file, which I then imported along with all my other styles into a master stylesheet file. This approach worked great on webkit-based browsers along with Firefox. IE-based browsers did not load the font at all.

The fix? Remove the .scss file I had made for the icon font and load the style.css font from the download package upfront in my index.html file. Problem solved. Fonts loading correctly, icons everywhere, everybody's happy (or they will be, after the next deploy I make) =).

Case closed. Thanks for the suggestions in this thread.

Keyamoon

unread,
Aug 21, 2015, 12:30:33 PM8/21/15
to IcoMoon
Glad to know you were able to solve it. It's a strange problem though. Sorry we I couldn't help much.
Reply all
Reply to author
Forward
0 new messages