css - Icon fonts opaque in all versions of Internet Explorer -

css - Icon fonts opaque in all versions of Internet Explorer -

i created couple icon fonts icomoon.

they work fine in other browsers reason opaque in versions of ie tested (8-11). bootstrap's icon fonts fine it's must doing or not doing.

you can see in upper left corner here: http://voicethread.com/new/myvoice/#browse

how looks in different browsers:

my guess there issue way icomoon created font files.

i'm having problem rendering in chrome, ie, , ff (respectively):

it appears font beingness delivered site okay:

here relevant portions of css file, wouldn't wound include in question:

class="lang-css prettyprint-override">@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 seek content type "\e601", works fine. i'm guessing it's build specific item.

you can confirm downloading font-viewer fontforge , opening .woff file:

it shows same problem, it's unlikely browser.

if double click on icon, you'll see exact vectors used create it:

what's happening circle , vt logo both rendered on "fore" layer. within circle filled in, rendering "vt" fill invisible. see changing shape of circle , seeing vt come out "behind" it.

i'm not sure difference in circles was, twitter circle seems cancelling out inner shapes. can re-create , paste circle other icon this:

then export , upload host

just measure, saved changes, exported of relevant font files, , added them github can download them.

until add together own host, this'll work:

class="lang-css prettyprint-override">@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 way, can seek adding unicode-range @font-family declarations browser needs download characters absolutely needs, 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/

css twitter-bootstrap internet-explorer cross-browser fontfamily