15

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

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

ブートストラップ アイコン (Glyphicons) は、次のリンクで確認できるように、わずかに上に配置されています。

ここに画像の説明を入力

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

4

4 に答える 4

6

問題は Google フォントに関するものではなく、font-size と vertical-align の組み合わせにあると思います。Bootstrap のアイコンのデフォルトの font-size は 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;
}

あなたの「ダッシュボード」ボタンでは、フォントサイズが 14px より大きく、おそらく 22px のように見えますか? 1 つの解決策は、ボタンの代替/拡張セレクターを作成し、次のように変更vertical-alignすることbaselineです。

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

ただし、視覚の中心は単語によって異なることに注意してください。たとえば、「ダッシュボード」にはディセンダーがありません (タイポグラフィーの構造についての詳細を参照してください)。baseline見栄えがよくない場合は、他のいくつかを試してください。ここで仕様を参照してください。

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

于 2012-12-30T15:18:16.587 に答える
1

過去に Bootstrap で次のような CSS を使用しました。

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

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

幸運を！

于 2012-12-29T15:30:26.053 に答える