アイコンに画像を使用する場合は、画像を探して、アップロードして、さらにタグを記述する必要がありますが、たった少しのタグだけで表示可能という便利な方法もあるんです。
タグは「i」なので、テキスト表示されるため、色やサイズなどのデザインの変更も簡単にできます。
今回はFont Awesomeを使用する方法をご紹介します。
1.Font Awesomeのファイルを読み込む
Webフォントは、Font Awesomeにあるフォントを使用するので、Font Awesomeのサーバーを読み込むように指示してあげましょう。以下のlink要素を<head>～</head>内に記述して下さい。
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Font Awesome
http://fontawesome.io/
2.「i」タグを記述してWebフォントを表示する
使用できるWebフォントは以下のFont Awesomeにあるアイコンです。http://fontawesome.io/icons/
使用したいアイコンが見つかったらアイコンをクリックしてみましょう。そこで表示された「i」タグを記述するだけでWebフォントは表示されます。
■例
<i class="fa fa-home" aria-hidden="true"></i> ホーム <i class="fa fa-play" aria-hidden="true"></i> 再生アイコンこのタグを記述すると、こう表示される
↓
ホーム
再生アイコン
応用編
CSSでアイコンのサイズ・色をカスタマイズしてみましょう。通常のCSSと同様にclassを指定するか、styleを記述するだけなので簡単です。<p style="font-size:55px;color:#71C9CE;"><i class="fa fa-home" aria-hidden="true"></i> ホーム</p> <p style="font-size:25px;color:#9E579D;transform: rotate(8deg);"><i class="fa fa-play" aria-hidden="true"></i> 再生アイコン</p>このタグを記述すると、こう表示される
↓
ホーム
再生アイコン
■transform = 要素の角度を変える
- rotate() = 回転
- rotateX() = Xを軸として時計回りに回転
- rotateY() = yを軸として時計回りに回転
- rotateZ() = zを軸として時計回りに回転
- rotate3d() = (x軸,y軸,z軸,数値)
※Font Awesomeのzipをダウンロードし、自身のサーバーにアップロードすれば、WebフォントをFont Awesomeの外部サーバーから読み込む必要はなくなりますが、今回は説明を省略します。