Webアイコンフォントを使ってみよう!マテリアルアイコン編
![](https://kirari-yums.net/wp-content/uploads/2021/07/2770388_s.jpg)
アイコンフォントといえばFont Awesomeが有名ですが、新バージョン「Font Awesome6」が提供開始されたものの有料のみの提供となってしまいました。
旧バージョンの「4」と「5」がFree(無料)とPro(有料)がまだ提供されているので無料で使えます。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
Font Awesomeはもう無料で使えなくなるのかなぁ?
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
今回提供開始された「Font Awesome6」からは有料化されるんだろうね~。旧バージョンの4や5もいつまで使わせてくれるか…(^^;
Font Awesomeが有料となり無料で使えなくなれば乗り換えを考えなくてはいけません。
そこで今回はFont Awesomeの代わりとして使われ始めている「マテリアルアイコン」の使い方などを書きたいと思います。
マテリアルアイコンって?
マテリアルアイコンは、Googleが提供しているアイコンフォントです。Googleが提唱しているマテリアルデザイン(Material Design)forを基に作られたアイコンです。
アイコンは900種類以上あり、5つの少しデザインが違うタイプがあります。
![](https://kirari-yums.net/wp-content/uploads/2021/08/A67DE378-53EA-4807-8FFB-C969BB5997E3-e1627775534237.jpeg)
アイコンはCSSで読み込む方法の他にSVG、PNGでダウンロードでき、画像としても使うことができます。
使い方は簡単で無料で使え、Font Awesomeより軽量なのでFont Awesomeの代わりに今後使われる可能性があると思います。
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
実際当サイトで使用しているテーマ「Luxeritas」ではバージョン3.18.0からマテリアルアイコンが標準搭載されています。
マテリアルアイコンを使うための準備
マテリアルアイコンは「Google Fonts」内にあります。上記リンクからGoogle Fontsへ行き、メニューの「Icons」をクリックしてください。
アイコンを読み込むためのコードを設置
CSSでアイコンを読み込むために以下のコードをHEAD内に設置してください。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
※WordPressでどこにせってしていいか解らない場合は以下の記事を参考にどうぞ。
Luxeritasバージョン3.18.0からマテリアルアイコンが標準搭載されました。3.18.0以降をお使いの場合は上記のコードを設置する必要はありません。
(Luxeritasでの設定方法については次回の記事で説明します。)
使い方
HEAD内にコードを設置すれば使えるようになります。
HTMLを使う
まずは使いたいアイコンをマテリアルアイコンから検索して選択する。
![](https://kirari-yums.net/wp-content/uploads/2021/08/12B39EF3-F71B-4EBD-BD9F-0CA9BD8AB167-e1627783408541.jpeg)
アイコンの詳細が表示されます。
アイコンのサイズや色(WhiteまたはBlack)を選択後「Icon Font」にあるコードをコピーしてください。
![](https://kirari-yums.net/wp-content/uploads/2021/08/D5441DFA-3674-40DC-9847-DEE0E0DADAF8.jpeg)
コピーしたコードを記事に貼り付ければ完了です。
色や大きさを変える
文字として使えるので色を変えたり大きさを変えることができます。
<span class="material-icons-outlined" style="font-size:40px; color:red;">
home
</span>
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
おっ!ブロックエディタのツールの機能を使っても色や大きさを変えることができるんだね!
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
文字として使えるからね。Font Awesomeもマテリアルアイコンも同じだね(^皿^)
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"; と指定します。
アイコンの指定
アイコンはアイコン名またはアイコンのコードを指定します。アイコン名、アイコンのコードはアイコンの詳細でコピーできます。
![](https://kirari-yums.net/wp-content/uploads/2021/08/3408A3B6-8CA4-43C3-809B-A311E499E301.jpeg)
content:"check_circle";
content:"\e86c";
画像としてダウンロード
アイコンの詳細の下にSVGとPNGというボタンがあります。ボタンをクリックするとアイコンを画像としてダウンロードすることができます。
![](https://kirari-yums.net/wp-content/uploads/2021/08/FF2FD3D4-D611-4B2D-A6CF-99D12F30680B.jpeg)
最後に
今回はGoogleが提供しているマテリアルアイコンについて紹介しました。
冒頭でも書きましたが、アイコンフォントで有名なFont Awesomeは新バージョンから有料化され今後どうなるのかわからない状況です。
マテリアルアイコンはFont Awesomeに比べアイコンの数は少ないですが、Font Awesomeが無料で使えなくなった場合に備えてFont Awesome以外のアイコンフォント導入を考えている方は参考にしてください。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
結耶。Font Awesomeって有料だといくらなの?
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
99ドル/年だよ。年に1万円前後かかるね。私的には年に1万円払うなら無料で使えるアイコンサービスを使う!w
ディスカッション
コメント一覧
まだ、コメントがありません