【アイコン】Google Material icons + 文字列を揃える技術

スポンサーリンク
WEB技術

こんにちは。WEB関係の仕事をしてから丸5年が経ちました。普段WEBサイトを構築する際、fontAwesomeばかりを使用していました。

最近Google Material Iconを使用するきっかけが仕事上増えたため、使用方法をご紹介させて頂きます。

今までfontAwesomeしか使用しなかったので表現の幅が狭かったのですが、Google Material Iconを使用することによって表現の幅が広くなった分、デザインの幅も広がりました。

今回はGoogle Material Iconの使用方法をご紹介させていただきます。

スポンサードサーチ

スポンサーリンク

使用方法

使い方は至って簡単。

  1. GoogleのCSSを読み込ませる
  2. アイコン表示用のHTMLを取得するだけ

fontAwesomeと同じような要領で使えます!めちゃ簡単!

まずはhead内にCDNで読み込む

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

あとは挿入したい部分に<i></i>で埋め込むだけ!

Google Material Iconを開きます。

例えばお店のアイコンを挿入するとします。
「store」と検索

  1. 好みのアイコンをクリック
  2. 左下のSelected Iconをクリック

このようなコードが出てくるかと思うので、今回はモダンブラウザ用の上の部分のコードを使います。

<p><i class="material-icons">store_mall_directory</i> 来店情報</p>

上のコードを反映すると・・・!

上記のような感じになります。

反映されましたが上下のラインがあってないですね。
これじゃ不格好なので下のラインに合わせるようにします。

ラインの合わせ方

style.cssに下記を挿入するだけで解決ができます!

.material-icons{
display: inline-flex;
vertical-align: middle;
}

反映した結果

画像が小さいので分かりづらくて申し訳ないですが、反映されているのが確認できました!

fontAwesomeをメインで使っているひとは是非Google Material iconsも試してみてくださいね。

WEB技術
スポンサーリンク
スポンサーリンク
Nagi Rhythm
タイトルとURLをコピーしました