Bootstrap + Fontawesome + IE7 = без надписи на кнопках со значком

Question

У меня есть проблемы с Bootstrap, Fontawesome и IE7 при использовании группы кнопок, как это:

<div class="btn-group"> 
    <a href="some-url.html" class="btn icon-circle-arrow-left"> Back</a> 
    <a href="some-other-url.html" class="btn icon-edit"> Edit</a> 
</div> 

Я включил файлы CSS в голове документ (HTML5) как:

<link href="/bootstrap/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/fontawesome/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/fontawesome/css/font-awesome-ie7.min.css" media="screen" rel="stylesheet" type="text/css" /> 

Он отображается в большинстве современных браузеров. Но в IE7 текст субтитров на кнопке исчезает. Смотрите прилагаемый скриншот (IE7 на WinXP, IE8 на WinXP, Safari на OS X). При использовании инструментов разработчика F12 в IE8 и работе в режиме совместимости я вижу, что текстовый узел в теге содержит только квадрат (значок, который инструменты разработчика не могут отображать); текст в узле отсутствует. Изменение его вручную избавляет от значка и отображает текст.

Есть ли у кого-нибудь предложения, как я могу исправить эту проблему? К сожалению, отказаться от поддержки IE7. Это нормально, что это выглядит некрасиво, хотя .. :-)

Answer 1

Этого следует ожидать, потому что они используют выражение CSS для генерации необходимого вам контента из-за отсутствия поддержки IE7 :before/:after.

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome-ie7.min.css

.icon-glass{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')} 

Вы должны использовать пустой элемент в этом случае:

<a href="some-url.html"><span class="btn icon-circle-arrow-left"></span> Back</a> 

Answer 2

Вы пробовали в том числе html5shiv для HTML5 поддержки в IE 6-8? https://code.google.com/p/html5shiv/