Icon fonts opaque in all versions of Internet Explorer - css

Question

I created a couple icon fonts with IcoMoon.
They work fine in all other browsers but some reason they are completely opaque in all versions of IE tested (8-11). Bootstrap's icon fonts look fine so it's something I must be doing or not doing.
You can see it in the upper left corner here: http://voicethread.com/new/myvoice/#browse
How it looks in different browsers:

Answer 1

My guess is there is an issue with the way that IcoMoon created the font files.
I'm having trouble rendering in Chrome, IE, and FF (respectively):
It appears the font is being delivered to the site okay:
Here are the relevant portions of your CSS file, which wouldn't hurt to include in the question:
#font-face {
font-family: 'vt-icons';
src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f'); /* IE9 Compat Modes */
src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f') format('woff'), /* Modern Browsers */
url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f') format('truetype'), /* Safari, Android, iOS */
url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg'); /* Legacy iOS */
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'vt-icons';
}
.icon-vt-logo-solid:before {
content: "\e600";
}
.icon-study: before {
content: "\e601";
}
If you try another content type like "\e601", it works fine. So I'm guessing it's the build for that specific item.
You can confirm this by downloading a font-viewer like FontForge and opening the .woff file:
It shows the same problem, so it's unlikely to be the browser.
If you double click on the icon, you'll see the exact vectors used to create it:
What's happening is that the circle and the VT logo are both rendered on the "fore" layer. Everything inside the circle is filled in, rendering the "VT" fill invisible. You easily see this by changing the shape of the circle and seeing the VT come out from "behind" it.
I'm not sure what the difference in circles was, but the twitter circle seems to be properly cancelling out the inner shapes. So you can copy and paste that circle into your other icon to get this:
Then just export and upload to your host
Just for good measure, I saved the changes, exported some of the relevant font files, and added them to GitHub so you can download them.
Until you add to your own host, this'll work:
#font-face {
font-family: 'vt-icons';
src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
unicode-range: U+E600-E626;
}
Working Version! Yay!
By the way, You can also try adding a unicode-range for #font-family declarations so the browser only needs to download the characters it absolutely needs, like this: unicode-range: U+E600-E626;
Further Reading
http://css-tricks.com/snippets/css/using-font-face/
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
http://fontforge.github.io/en-US/