Glyphicons Pro в Bootsrap 3/Иконка не выровнена с текстом

Question

Я просто включил шрифт Glyphicons pro в мой проект Bootstrap. Значки отображаются, но выравнивание значков, например. в кнопке неверно.

Что мне нужно изменить, чтобы использовать Glyphicons Pro Set, как Halflings?

<button type="button" class="btn btn-primary"> 
 
    <span class="glyphicons glyphicons-lightbulb"></span> Button 1 
 
</button> 
 

 
<button type="button" class="btn btn-primary"> 
 
    <span class="glyphicon glyphicon-bell"></span> Button 2 
 
</button>

Answer 1

Переместить текст из <span> с glyphicon и применить vertical-align:middle к

<button type="button" class="btn btn-primary"> 
<span class="glyphicons glyphicons-lightbulb" style="vertical-align:middle"></span> Button 1 
</button> 

Answer 2

Override стандартного вертикального выравнивания ("верхний") glyphicons pro, добавив «! important» в инструкцию css:

.glyphicons { 
    vertical-align:middle !important; 
}