Ошибка с символом шрифта и css изменить цвет

Question

Я использую bootstrap 3 и glyphicons (версия PRO, но это почти то же самое, некоторые другие значки) в качестве шрифта.

Пример кода для одного в контексте:

<div class="col-md-4"> 
    <span class="glyph_icons compass"></span><br /> 
    <h4>Jurassic Park Lorem Ipsum</h4> 
    <p>I was overwhelmed by the power of this place; but I made a mistake, too. I didn't have enough respect for that power and it's out now. The only thing that matters now are the people we love: Alan and Lex and Tim. John, they're out there where people are dying.</p> 
</div> 

Он хорошо работает. Теперь я хочу добавить изменение цвета наведения, и у него есть некоторые сбои. Иногда (но не всегда) он неправильно изменяет цвет по бокам значка (часть, которая находится за пределами поля диапазона. Иногда это происходит при наведении курсора мыши, а иногда и на мыши, возвращаясь к исходному цвету. . После ~ 1 сек он фиксирует

MouseOver Ошибка:

mouseover failed http://i.picresize.com/images/2014/02/21/kaQTN.png

MouseOut Ошибка:

mouseout failed http://i.picresize.com/images/2014/02/21/Buvg.png

ПРИМЕЧАНИЕ: Если я изменяю расстояние между буквами до 1,1 или более, это, похоже, устраняет проблему с правой стороны значка, но не может найти способ исправить его слева.

DEMO ошибки:http://www.bootply.com/116686

Answer 1

Я нашел решение для вас. Оказывается, значок не покрывает полное пространство, которое предоставляется.

Исправление этой проблемы по крайней мере на хроме добавляет следующий атрибут css к набору значков, который поставляется с лотком.

.glyphicon-sound-dolby:before { 
    content: "\e190"; 
    padding: .1em; 
} 

Я бы поместил его в общий класс значков, чтобы он воздействовал на всю библиотеку, которая, если память мне подходит. Было бы: before:: после имен классов. Не работали с библиотекой в ​​возрасте, поэтому постарайтесь просто настроить значки, которые я бы сказал.

:before, :after{ 
    box-sizing: border-box; 
    padding: .1em; 
} 

Днем кодирования :)