Ikony Bootstrap (Glify) są nieco ułożone podczas używania Czcionek Google, jak mogę rozwiązać ten problem?

Question

Jeśli dodać następującą Google Fonts w tagu głowy dokumentu

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet"> 

Bootstrap ikony (Glyphicons) są ustawione lekko do góry, jak można zobaczyć pod tym linkiem: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

Jak mogę rozwiązać ten problem?

Answer 1

Użyłem CSS tak z Bootstrap w przeszłości:

[class^="icon-"] { 
margin-top: 3px; 
} 

Wystarczy zagrać z margin-top, dopóki nie wygląda dobrze.

Powodzenia!

Answer 2

Nie sądzę, że problem polega na czcionce Google, ale na kombinacji rozmiaru czcionki i wyrównania w pionie. Domyślny rozmiar czcionki ikon w Bootstrap wynosi 14 pikseli, a w deklaracji icon- mamy vertical-align: text-top;, zobacz poniższy kod.

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    margin-top: 1px; 
    *margin-right: .3em; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url("../img/glyphicons-halflings.png"); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 
} 

W przycisku "Pulpit nawigacyjny" wydaje się, że rozmiar czcionki jest większy niż 14 pikseli, może 22 pikseli? Jednym z rozwiązań może być do tworzenia/selektor wewnętrzny alternatywny dla przycisku i zmienić vertical-align do baseline:

[class^="icon-"] .my-class, 
[class*=" icon-"] .my-class { 
    vertical-align: baseline; 
} 

Należy jednak pamiętać, że środek wizualny zależy od tego słowa; "Pulpit nawigacyjny" nie ma na przykład żadnych podjazdów (więcej informacji na temat the anatomy of typography). Jeśli baseline nie wygląda dobrze, wypróbuj niektóre z pozostałych, zobacz specification here.

Możliwe rozwiązanie z @ user1751766. Ale proponuję, aby .my-class zakres tej alternatywnej deklaracji od domyślnej deklaracji Bootstrap.

Answer 3

idź do Bootstrap.css

.glyphicon { 
    position: relative; 
    top: 11px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 

zadzieraj z top, aż zrówna się tak, jak lubisz. 11px działało dla mnie na sercu, ale może zależeć od tego, która ikona/jak próbujesz go użyć. Po prostu majstruj, dopóki nie będzie dobrze.

Answer 4

Ten pracował dobrze dla mnie:

span.glyphicon { 
    vertical-align: middle; 
    margin-top: -5px; 
}