While using IcoMoon icons on my website, I have noticed that they function perfectly in all modern browsers except for Internet Explorer 7, where they do not display at all. In Internet Explorer 8, the icons show up as small boxes instead. The CSS code I am using is from IcoMoon with the exception of the relative path to the font:
@font-face {
font-family: 'icomoon';
src:url ('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
I am utilizing the data-icon attribute (e.g.
<li data-icon=""><a href
, etc.) to showcase the icon in my navigation menu.
What could possibly be causing this issue?