2013-03-01 3 views
1

Мне нужно создать эффект удара на значки, которые являются шрифтом. Я пробовал технику теневой тени, но проблема в том, что она вышла очень прерывисто, поэтому то, что я закончил, это отделить контур от значка и экспортировать его как шрифт, а затем снова объединить их друг с другом.Icon Font wont work in internet explorer

Он отлично работает сейчас! ... Просто не в IE.

Я не тихий уверен, насколько лучше я могу объяснить мою проблему другой, то показывая вам все: пользовательских шрифтов не работает в jsfiddle, так что я временно upoaded его - http://babysignlanguage.co.za/icon_fonts/

Heres код:

CSS:

@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; 
} 
body {background:#99FFCC;} 
.menu_icon_gen {font-size: 6em; font-family: 'icomoon';} 
.space { letter-spacing:-2em; zoom:1;} 
.left {float:left;} 
.green {color:#ACBB72;} 
.white {color:#FFF;} 

HTML

<div class="menu_icon_gen" aria-hidden="true"> 
    <span class="green space left">&#xe000;</span> 
    <span class="white">&#xe001;</span> 

<div class="menu_icon_gen" aria-hidden="true"> 
    <span class="green space left">&#xe002;</span> 
    <span class="white">&#xe003;</span> 
</div> 
+0

Это своего рода работает, если вы установите письмо-интервал для '-1em' (что имело бы больше смысла, любая причина, почему -2?) – robertklep

+0

Очень правда, но даже в этом случае в IEE это значок телефона по-прежнему не работает, а дом i con неуместен и до сих пор не идет в ie7. –

+0

А теперь я вижу. У меня недавно были проблемы с шрифтом, а также в IE, в конце концов я просто сдался :( – robertklep

ответ

1

Я дал position: relative к div и position: absolute к span.

Работы для меня в IE 9.

enter image description here

+0

Это странно он работает для меня сейчас в IE7, но не IE9 и IE8 ...: \, Типичный IE –

+0

Вы пытались поиграть с 'z-index'? –

+0

Нет, у меня нет, я экспериментирую с этим в секунду .. спасибо –