[css]疑似要素でMaterial Iconsを使用する方法

Googleのやつ。

Material IconsはGoogleから独立した感じでFontawesomeみたいな感じでアイコンを作って配布してくれてたのが、気がついたらGoogleFontsに追加されてた。で、僕は普段疑似要素に突っ込んで使うので、まずはそのやり方。

基本形

@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
a::before{
    content: "\e5cc";
    font-family: "Material Icons";
}

fontawesomeよりもシンプル。font-weightの指定も何もいらない。

Google Fonts
Making the web more beautiful, fast, and open through great typography

contentの内容は「Code point」のところを引っ張ってくればいい。

バリエーションについて

Fontawesomeでいうfont-weightみたいな感じで、Material IconsにはFilledとかRoundedとかでバリエーションがある。font-familyを読み込んで指定になるのでややこしい。

//ノーマル
@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
//Rounded
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round');

googleのフォントはまとめて1行で書けるんで、こんな感じにできる。

//ノーマル + Rounded
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Round');

font-family名は「Icon font」のclass名準拠。

a::before{
    content: "\e5cc";
    font-family: "Material Icons Round";
}

こんな感じ。font-familyを変えてもコードはそのまま。
font-familyは全部小文字でも読んでくれるので地味に楽。

スタイル読み込み名font-family
Filled(デフォルト)family=Material+IconsMaterial Icons
Outlinedfamily=Material+Icons+OutlinedMaterial Icons Outlined
Roundedfamily=Material+Icons+RoundMaterial Icons Round
Sharpfamily=Material+Icons+SharpMaterial Icons Sharp
Two tonefamily=Material+Icons+Two+ToneMaterial Icons Two Tone

こうしてまとめてみると、どうも表記にまとまりがない。

まとめ

デザイン変更はfont-familyを変える。最初にちゃんと宣言しておけばそれで済む。font-familyの種類がちゃんと把握できてること、その際の表記を間違わないこと、気をつけるのはそのあたりっていうか、それが地味にめんどくさいのでだるい。

Material Iconsは優秀なんだけど、サービスとかブランドのアイコンがない。その点ではFontawesomeの方が便利だなーと、使い分けとか共存とかが見えてくるので完全な乗り換えは無理かな。

コメント

タイトルとURLをコピーしました