Webアイコンフォント「FontAwesome」の紹介をします。
公式サイトよりフォントデータをダウンロードして使用する方法と、BootstrapCDNを利用する方法があります。CDNを利用すると、ダウンロードしてサーバーにアップロードする手間が省けるので使いやすいと思います。
ここではCDNを利用した方法を記載します。
利用方法は、HTMLに以下のソースを挿入するだけで、600以上のアイコンを使うことができます。
1 | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> |
アイコンをいくつか紹介します。
Coffee
1 | <i class="fa fa-coffee" aria-hidden="true"></i> |
Wi-Fi
1 | <i class="fa fa-wifi" aria-hidden="true"></i> |
Graduation Cap
1 | <i class="fa fa-graduation-cap" aria-hidden="true"></i> |
サービスや企業のロゴ
その他にも、公式サイトの一覧より選んで使ってみてください。