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

ホームページ作成の小技集

東京.のさくっとホームページ.制作のサイト.制作の小技

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

東京のHP制作会社 さくっとホームページ制作

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]ボタンをクリックします。

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

 

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

コピー

 

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

 

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

3d_rotation 何かテキストを入力