よく使うWebアイコンフォントまとめ
色々なWebサイトでWebアイコンフォントが採用されてきていて、アイコンの種類も多種多様です。
今回はWebアイコンフォントの中でも利用シーンが高そうなものをまとめてみたので紹介したいと思います。
Contents
Webアイコンフォントとは？
フォントは文字に使われるあのフォントですが、アイコンフォントとはなんでしょう。
答えはその名前の通りでアイコンデータがフォント化されたもので、通常の文字のように色を変更できたり、大きさを変更できたりできます。
画像だといちいち作り直さないといけませんが、通常の文字のように使えるので汎用性がありますよね。
今回は簡単に導入できるFont Awesomeで提供されているWebアイコンフォントの中から紹介したいと思います。
使い方
アイコンフォントの読み込み
1行CSSを読み込むだけです。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
ちなみに、メールアドレスを登録すると自動で最新のソースを読み込んでくれるJavascriptを使うことが可能になります。
これによりアイコンフォントの更新作業のために、各ウェブサイトで読み込んでいるCSSの更新作業がなくなるので、面倒な手間が省けます。
メアド登録して更新不要のJavascriptを使用したい方は下記よりどうぞ。
Get Started with Font Awesome（外部サイト）
使い方
使い方は簡単で、iタグに「fa」と「fa-XXX」クラスを追加するだけです。
レトロなカメラは下記のように指定するだけです。
<i class="fa fa-camera-retro"></i>
こんな感じで表示されます。
あと、標準で拡大表示用のクラスも用意されています。
<i class="fa fa-camera-retro fa-lg"></i> fa-lg：1.3333em <i class="fa fa-camera-retro fa-2x"></i> fa-2x：2em <i class="fa fa-camera-retro fa-3x"></i> fa-3x：3em <i class="fa fa-camera-retro fa-4x"></i> fa-4x：4em <i class="fa fa-camera-retro fa-5x"></i> fa-5x：5em
カテゴリ別アイコンまとめ
それではカテゴリ別によく使いそうなアイコンフォントを紹介していきます。
ウェブアプリ向け
スマートフォン向けメニューボタン
CSS3のrotateを使ってからに切り替える手法もメジャーですが、簡単にだけで表現するのもシンプルで良いと思います。
<i class="fa fa-bars" aria-hidden="true"></i>
ブックマーク（しおり）系
ブックマークもFeedlyなどのウェブサービスで見かけますね。
<i class="fa fa-bookmark" aria-hidden="true"></i>
反転版も
<i class="fa fa-bookmark-o" aria-hidden="true"></i>
チェック系
ブログの見出しなどで利用できそうですね。
<i class="fa fa-check" aria-hidden="true"></i>
<i class="fa fa-check-circle" aria-hidden="true"></i>
<i class="fa fa-check-square" aria-hidden="true"></i>
<i class="fa fa-check-square-o" aria-hidden="true"></i>
時計
<i class="fa fa-clock-o" aria-hidden="true"></i>
コピーライト
©が使えないフォントで有効だと思います
<i class="fa fa-copyright" aria-hidden="true"></i>
クレジットカード
ECサイトで利用できそうです。
<i class="fa fa-credit-card" aria-hidden="true"></i>
ダウンロード
ドキュメントのリンクに使えますね。
<i class="fa fa-download" aria-hidden="true"></i>
ビックリマーク
バリデーションエラーの時に使えますね。
<i class="fa fa-exclamation" aria-hidden="true"></i>
反転版も
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
外部リンク
私は一番使うアイコンですね。
<i class="fa fa-external-link" aria-hidden="true"></i>
反射板も。
<i class="fa fa-external-link-square" aria-hidden="true"></i>
RSSアイコン
これも使いそうですね。
<i class="fa fa-rss" aria-hidden="true"></i>
さいごに
他にもたくさんあるので、随時更新していこうと思いますが今回はここまでとします。
ここで紹介したのは比較的簡単に導入できるFont AwesomeのWebアイコンフォントですが、アイコンフォントは他にもたくさんあるので横断的に紹介していけたらと思います。