マテリアルアイコンを使っているのですが、line-height: 1;がCDNのCSSにあるため、line-heightとheightを同じ値にしても、中央にきません。
.material-icons {
line-height: 0;
}
で上書きしても、異常に上に行ってしまいます。
リセットするようなものもないようですが、皆さんどうやって変な癖をなくしていますか?
CDNなのでCSSのline-heightを削除することもできないですよね。
・CDNのCSS
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
・下記で上書きした所、上に異常な移動をする。
.material-icons {
line-height: 0;
}
・line-height: 0;をつけて1remくらいだと中央に来て、サイズを大きくしていくと真ん中から上にずれていくことがわかりました。
.material-icons {
font-size: 1rem;
}
・かきのサイズにした所なぜか真ん中に来ました。
理由はわかりません。
そのようなものと割り切るか、CSS3でアイコンを作ったほうがいいですかね?
.material-icons {
font-size: 8rem;
line-height: 0.75;
}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/14 05:47
2016/02/18 00:17