Значки Bootstrap (Glyphicons) немного позиционируются при использовании Google Fonts, как я могу решить эту проблему?

Если я добавлю следующие Google Fonts в главный тег документа

<link href="#" onclick="location.href='http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans'; return false;" rel="stylesheet">

Значки Bootstrap (Glyphicons) расположены немного вверх, как вы можете видеть по этой ссылке: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

Как я могу решить эту проблему?

Ответ 1

Я не думаю, что проблема связана с шрифтом Google, а вместо этого сочетанием размера шрифта и выравнивания по вертикали. Размер шрифта по умолчанию в Bootstrap равен 14px, а в объявлении для icon- у нас есть vertical-align: text-top;, см. Код ниже.

[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;
}

В вашей кнопке "Панель мониторинга" кажется, что размер шрифта больше 14 пикселей, а может быть, 22 пикселя? Одним из решений может быть создание альтернативного/дополнительного селектора для вашей кнопки и изменение vertical-align на baseline:

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

Но помните, что визуальный центр зависит от слова; "Dashboard" имеет, например, нисходящие (подробнее о анатомии типографии). Если baseline не выглядит хорошо, попробуйте некоторые другие, см. здесь.

Предлагаемое решение от пользователя @user1751766 также возможно. Но я предлагаю .my-class охватить это альтернативное объявление из объявления по умолчанию Bootstrap.

Ответ 2

Перейдите в 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;

Отключить top до тех пор, пока он не выстроится так, как вам нравится. 11px работал у меня на сердце, но это может зависеть от того, какой значок/как вы его пытаетесь использовать. Просто возитесь, пока он не станет хорошо.

Ответ 3

Это сработало хорошо для меня:

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

Ответ 4

Я использовал CSS, как это, с Bootstrap в прошлом:

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

Просто играйте с маркой вверх, пока она не будет выглядеть правильно.

Удачи!