ドキュメントの head タグに次の Google Fonts を追加すると、
<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
ブートストラップ アイコン (Glyphicons) は、次のリンクで確認できるように、わずかに上に配置されています。
この問題を解決するにはどうすればよいですか?
ドキュメントの head タグに次の Google Fonts を追加すると、
<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
ブートストラップ アイコン (Glyphicons) は、次のリンクで確認できるように、わずかに上に配置されています。
この問題を解決するにはどうすればよいですか?
問題は 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 のデフォルト宣言からこの代替宣言のスコープを設定することをお勧めします。
過去に Bootstrap で次のような CSS を使用しました。
[class^="icon-"] {
margin-top: 3px;
}
それが正しく見えるまで、マージントップで遊んでください。
幸運を!