For some reason my website causes IE to render in "document mode IE7". I have replaced the sprites and image icons on the page with a font version. Unfortunately, the font-face css does not work in this browser. When I switch the "document mode" to IE8 or IE9 in IE's developer tools, the icons show as intended.
I do not understand why IE7 does not show the icons. As far as I know, it should be possible for it to use the font.
As you can see in the code, I have used the font files and css defintions from fontello.com.
Here is the style sheet that I use to show the icons:
<style type="text/css">
@font-face {
font-family: 'fontello-postbit';
src:url(/includes/fonts/fontello-postbit.eot);
src:url(/includes/fonts/fontello-postbit.eot?#iefix) format('embedded-opentype'),
url(/includes/fonts/fontello-postbit.woff) format('woff'),
url(/includes/fonts/fontello-postbit.ttf) format('truetype'),
url(/includes/fonts/fontello-postbit.svg#fontello-postbit) format('svg');
font-weight:normal;
font-style:normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'fontello-postbit';
font-style:normal;
font-weight:normal;
font-size: 120%;
display:inline-block;
text-decoration:none;
width:1em;
margin-right:0.2em;
text-align:center;
opacity:0.8;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
margin-right: 0.2em;
speak: none;
}
.icon-star:before { content: '\2605'; } /* '?' */
.icon-star-empty:before { content: '\2606'; } /* '?' */
.icon-flag:before { content: '\2691'; } /* '?' */
.icon-attention:before { content: '\26a0'; } /* '?' */
/* ... etc ...*/
.icon-user:before { content: '\1f464'; } /* '\1f464' */
</style>
EDIT: Duh - I just noticed that fontello offers a css workaround for IE7 themselves.
