マテリアルアイコンを使っているのですが、line-height: 1;がCDNのCSSにあるため、line-heightとheightを同じ値にしても、中央にきません。

Question

マテリアルアイコンを使っているのですが、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;
}

Answer 1

material-iconsにdisplay:inline を当てるのをやめましょう。
使う箇所に応じて修正用のクラスを当てるなどがいいと思います。

<i class="material-icons sample">サンプル</i>

.sample {
 padding-top: 10px;
 line-height: 1.5;
}

別の箇所に使う場合、新たな上書きがどうせ発生するだけなので下記の指定方法は実質無意味です。
CDNの設定をデフォルトとして、うまく調節する方法を個別に考えてください。

/* このやり方は避ける。*/
.material-icons {
 line-height: 0;
}

Comments

[退会済みユーザー]

ありがとうございます。material-icons、その他外部のサービスを導入した場合、JSなどは、見た目構造のCSSと別にしてマルチクラスにするのが良いということですね。
それでマルチクラスが4つくらいになっても仕方ないですね、。

[yamato_hikawa]

この修正用のクラスがBEMで言うところのModifierです。

Answer 2

CSSは後勝ちのはずなので、読み込み順が正しければ上書きされると思いますけどね。
下記の順序になっていれば、上書けるはずです。

<link rel="stylesheet" type="text/css" href="CDNのCSS" />
<link rel="stylesheet" type="text/css" href="自分で用意したCSS" />

上記順序になっているのに上書けない場合は、セレクタで負けている可能性もありますね。
上書き用のCSSを例えば以下のようにして

#icon-area .material-icons { 
    line-height: 0; 
} 

HTMLでは以下のように指定

<span id="icon-area">
  <span class="material-icons">
  </span>
</span>

ただ、

.material-icons {
line-height: 0;
}
で上書きしても、以上に上に行ってしまいます。

と書かれているので、効いてるのではないですか？
「異常に上」に行ってしまうんですよね？
そうなると、指定する値の問題ということになってきそうです。

Comments

[退会済みユーザー]

下記のようにしています。
<link rel="stylesheet" href="css/html5reset-1.6.1.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">

インスペクタで確認しているのでCSSは確実に効いています。
インスペクタでのCSS
element.style {
}
.action-hover:hover, .main__top-gnav a:hover {
cursor: pointer;
opacity: 0.5;
}
.drawermenu__material-icons {
font-size: 7rem;
}
.material-icons {
display: inline;
text-align: center;
}

.material-icons {
line-height: 0;
}

.material-icons {
line-height: 0;
}