web-dev-qa-db-ja.com

Bootstrapアイコン（Glyphicons）は、Google Fontsを使用すると少し上に配置されますが、どうすればその問題を解決できますか？

ドキュメントのheadタグに次のGoogleFontsを追加すると

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

次のリンクで確認できるように、ブートストラップアイコン（グリフィコン）は少し上に配置されています： http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

enter image description here

この問題を解決するにはどうすればよいですか？

csstwitter-bootstrapdocumentgoogle-font-apiglyphicons
15
Max

問題はGoogleフォントではなく、font-sizeとvertical-alignの組み合わせにあると思います。 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ピクセルより大きいように見えますか？ 1つの解決策は、ボタンの代替/拡張セレクターを作成し、vertical-alignをbaselineに変更することです。

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

しかし、視覚の中心は言葉に依存していることを忘れないでください。 「ダッシュボード」には、たとえば子孫がありません（ タイポグラフィの構造 の詳細を参照してください）。 baselineが見栄えが良くない場合は、他のいくつかを試してください。 仕様はこちら を参照してください。

@ user1751766から提案された解決策も可能です。ただし、この代替宣言をBootstrapのデフォルト宣言からスコープするように.my-classすることをお勧めします。

6
Osserspe

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は私にとっては心の底から機能しましたが、どのアイコン/どのように使用しようとしているかによって異なる場合があります。見栄えが良くなるまでいじくりまわします。

5
Huntario

これは私にとってうまくいきました：

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

私は過去にBootstrapでこのようなCSSを使用しました：

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

正しく見えるまでマージントップで遊んでください。

幸運を！

1
David Taiaroa