Webアイコンフォントを使ってみよう！マテリアルアイコン編

2021年8月1日ブログ

アイコンフォントといえばFont Awesomeが有名ですが、新バージョン「Font Awesome6」が提供開始されたものの有料のみの提供となってしまいました。

旧バージョンの「4」と「5」がFree(無料)とPro(有料)がまだ提供されているので無料で使えます。

Font Awesomeが有料となり無料で使えなくなれば乗り換えを考えなくてはいけません。
そこで今回はFont Awesomeの代わりとして使われ始めている「マテリアルアイコン」の使い方などを書きたいと思います。

マテリアルアイコンって？

home account_circle description

マテリアルアイコンは、Googleが提供しているアイコンフォントです。Googleが提唱しているマテリアルデザイン(Material Design)forを基に作られたアイコンです。

アイコンは900種類以上あり、5つの少しデザインが違うタイプがあります。

アイコンはCSSで読み込む方法の他にSVG、PNGでダウンロードでき、画像としても使うことができます。

使い方は簡単で無料で使え、Font Awesomeより軽量なのでFont Awesomeの代わりに今後使われる可能性があると思います。

マテリアルアイコンを使うための準備

マテリアルアイコンは「Google Fonts」内にあります。上記リンクからGoogle Fontsへ行き、メニューの「Icons」をクリックしてください。

アイコンを読み込むためのコードを設置

CSSでアイコンを読み込むために以下のコードをHEAD内に設置してください。

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

※WordPressでどこにせってしていいか解らない場合は以下の記事を参考にどうぞ。

使い方

HEAD内にコードを設置すれば使えるようになります。

HTMLを使う

まずは使いたいアイコンをマテリアルアイコンから検索して選択する。

アイコンの詳細が表示されます。
アイコンのサイズや色(WhiteまたはBlack)を選択後「Icon Font」にあるコードをコピーしてください。

コピーしたコードを記事に貼り付ければ完了です。

色や大きさを変える

home

文字として使えるので色を変えたり大きさを変えることができます。

<span class="material-icons-outlined" style="font-size:40px; color:red;">
home
</span>

CSSで指定する

ul{
    list-style:none;
}

ul li{
    font-size:20px;    /*文字サイズ*/
}

ul li:before{
    font-family:"Material Icons";
    content:"check_circle";    /*アイコン名またはコード*/
    margin-right:7px;
    color:red;    /*アイコンの色*/
}

CSSでアイコンの設定をする場合は(11行目) font-family:"Material Icons"; と指定します。

アイコンの指定

アイコンはアイコン名またはアイコンのコードを指定します。アイコン名、アイコンのコードはアイコンの詳細でコピーできます。

画像としてダウンロード

アイコンの詳細の下にSVGとPNGというボタンがあります。ボタンをクリックするとアイコンを画像としてダウンロードすることができます。

最後に

今回はGoogleが提供しているマテリアルアイコンについて紹介しました。

冒頭でも書きましたが、アイコンフォントで有名なFont Awesomeは新バージョンから有料化され今後どうなるのかわからない状況です。

マテリアルアイコンはFont Awesomeに比べアイコンの数は少ないですが、Font Awesomeが無料で使えなくなった場合に備えてFont Awesome以外のアイコンフォント導入を考えている方は参考にしてください。