1. HOME
  2. ホームページ作成の小技
  3. Googleのアイコンフォント Material Icons(マテリアルアイコン)の使い方

TECHNIQUES

ホームページ作成の小技

東京 のさくっとホームページ作成のHP制作の小技

Googleのアイコンフォント Material Icons(マテリアルアイコン)の使い方

Webアイコンフォントとはウェブページ上で文字と同じように表示できるアイコンの事です。
画像でアイコンを貼るのと違い、拡大してもぼやけないし、色もサイズも簡単に変えることができるのでとても便利です。
今回は、Googleが無料で提供するMaterial Icons(マテリアルアイコン)を利用してみましょう!

 

Googleのアイコンフォント Material Icons(マテリアルアイコン)の使い方

1.header.php内の</head>前に下記のコードを入れます

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

 

2.公式サイトのアイコン一覧を表示し、利用するアイコンを決めます。

https://material.io/resources/icons/?style=baseline

 

3.利用するアイコンをクリックします。

 

4.画面左下の[Selected Icon]ボタンをクリックします。

 

5.<span>~</span>の部分をコピーします。

 

6.投稿画面にてテキストエディタに切替て5.でコピーしたコードを貼りつけます。

 

7.こんな感じに表示されます!

3d_rotation 何かテキストを入力