Font Awesome は、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリストなどのアクセントとして使用する機会は多いです。
ただ、毎回サイトにアクセスして目的のアイコンフォントを探し出すのは結構手間だったりします。種類が多いですからね。
そこで今回は、Font Awesomeでよく使うアイコンフォントを使い方とともに50個ご紹介します。Webサイト制作時にチェックしながらコーディングしてみてください。
Font Awesomeを設定する
Font Awesomeを設定する方法はとても簡単です。必要なファイルを読み込んで、表示したい場所に設定するだけなので。ファイルはCDN版とダウンロード版が用意してあり、それぞれ設定方法が違います。
CDN版を設定をする
CDN版の方が手軽に設定できます。『BootstrapCDN』内で提供されておりますので、以下のタグを<head>内に記述するだけで利用可能です。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
最新バージョンを読み込みたい場合には、以下のリンク先にアクセスして新しいバージョンのタグを取得してください。
ダウンロード版を設定をする
ダウンロード版を利用する場合には、Font Awesomeのトップページヘッダー内にある『Download』ボタンから取得できます。
『Download』ボタンをクリックすると、以下の画像のようにポップアップ画面が表示されます（2016年11月現在）。
緑のボタンをクリックするとオリジナルのアイコンフォントなども設定したファイルがダウンロードできるのですが、有料（サブスクリプション制）となります。
その下にある『No thanks, just download Font Awesome』ボタンをクリックすることで無料で利用できますので、オリジナルのアイコンフォントが不要であればこちらをクリックします。
ダウンロードしたファイルを任意のフォルダにアップロードして、以下のタグを<head>内に記述します。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">path/to/font-awesome/には、ファイルのアップロード先を記述します。
これだけで事前の設定は完了です。
Font Awesomeの使い方
あとは、表示させたい箇所に設定していきます。
HTMLで使う
HTMLで設定させるケースは、部分的に使用したい場合に設定します。たとえば、ナビゲーションのアクセントとして利用するといったケースですね。内容に合わせて別のアイコンフォントを表示させたい場合には、HTMLタグにて設定した方が良いです。
HTMLタグで設定する場合には、以下のタグを表示させたい箇所に記述します。
例） Twitter
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
上記のように、Font Awesome用にclassを付けたHTMLタグを記述するだけです。
HTMLタグは、以下のページから取得することができます。
また、後述する『Font Awesomeよく使うアイコンフォント50個のご紹介』内でもご紹介してますので、そちらのHTMLタグもご参照ください。
CSSで使う
私は、CSSで設定する方法をよく利用します。というのも、TwitterやFacebookなどのSNSアイコンでの利用や、リストに表示させるマークとしての利用が特に多いので、使い回しが効くものの使用機会が多くなってきます。この場合は、CSSで設定しておいた方が便利なのです。
CSSで設定する場合には、事前にCSSファイルに設定しておきます。
例） Twitter
.tw:before {
content: '\f099';
padding: 0 .4em 0 0;
font-family: FontAwesome;
}
4行目のfont-family: FontAwesome;でフォント指定をし、2行目のcontent: '\f099';でTwitterのUnicodeを記述します。
\（バックスラッシュ）を付けることを忘れないようにしてください。これが無いと表示されません。\（バックスラッシュ）は『option + ¥』で入力できます。
また、各アイコンフォントのUnicodeは、以下のリンク先で取得できます。
その後、アイコンフォントを表示したい場所に以下のHTMLタグを記述します。
<span class="tw">Twitter</span>
Twitter部分は、任意のテキストを記述してください。
CSSのUnicodeも、後述する『Font Awesomeよく使うアイコンフォント50個のご紹介』内でご紹介してますので、そちらもご参照ください。
アイコンフォントを回転させて使う
ローディング用にアイコンフォントを回転させる事もできます。
例）
<i class="fa fa-spinner fa-spin"></i>
classにfa-spinを追加することで、アイコンフォントを回転させることができます。これはFont AwesomeのCSSでデフォルトで設定してあるものです。
使用機会は何気にあると思いますので、覚えておきたいですね。
Font Awesome でよく使うアイコンフォント50個のご紹介
設定方法が分かりましたら、必要なアイコンフォントを探してくるだけなのですが、先述したように種類が多すぎて、その都度探しにいくのは結構面倒なのです。なので、ここでWebサイト制作でよく使いそうなアイコンフォントを20個ご紹介していきますので、ぜひご覧ください。
SNS
- <i class="fa fa-twitter" aria-hidden="true"></i>
- \f099
- <i class="fa fa-facebook" aria-hidden="true"></i>
- \f09a
- <i class="fa fa-instagram" aria-hidden="true"></i>
- \f16d
- <i class="fa fa-get-pocket" aria-hidden="true"></i>
- \f265
- <i class="fa fa-google-plus" aria-hidden="true"></i>
- \f0d5
- <i class="fa fa-pinterest-p" aria-hidden="true"></i>
- \f231
記号や矢印
- <i class="fa fa-spinner fa-spin"></i>
- \f110
- <i class="fa fa-bars" aria-hidden="true"></i>
- \f0c9
- <i class="fa fa-bookmark" aria-hidden="true"></i>
- \f02e
- <i class="fa fa-angle-double-up" aria-hidden="true"></i>
- \f102
- <i class="fa fa-angle-double-down" aria-hidden="true"></i>
- \f103
- <i class="fa fa-angle-double-right" aria-hidden="true"></i>
- \f101
- <i class="fa fa-angle-double-left" aria-hidden="true"></i>
- \f100
- <i class="fa fa-angle-up" aria-hidden="true"></i>
- \f106
- <i class="fa fa-angle-down" aria-hidden="true"></i>
- \f107
- <i class="fa fa-angle-right" aria-hidden="true"></i>
- \f105
- <i class="fa fa-angle-left" aria-hidden="true"></i>
- \f104
- <i class="fa fa-check" aria-hidden="true"></i>
- \f00c
- <i class="fa fa-check-square-o" aria-hidden="true"></i>
- \f046
- <i class="fa fa-chain" aria-hidden="true"></i>
- \f0c1
- <i class="fa fa-commenting" aria-hidden="true"></i>
- \f27a
- <i class="fa fa-comments-o" aria-hidden="true"></i>
- \f0e6
- <i class="fa fa-envelope" aria-hidden="true"></i>
- \f0e0
- <i class="fa fa-share-square-o" aria-hidden="true"></i>
- \f045
- <i class="fa fa-external-link" aria-hidden="true"></i>
- \f08e
- <i class="fa fa-feed" aria-hidden="true"></i>
- \f09e
- <i class="fa fa-home" aria-hidden="true"></i>
- \f015
- <i class="fa fa-tag" aria-hidden="true"></i>
- \f02b
- <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
- \f087
- <i class="fa fa-mobile" aria-hidden="true"></i>
- \f10b
- <i class="fa fa-phone" aria-hidden="true"></i>
- \f095
ブランドロゴ関連
- <i class="fa fa-wordpress" aria-hidden="true"></i>
- \f19a
- <i class="fa fa-youtube" aria-hidden="true"></i>
- \f167
- <i class="fa fa-amazon" aria-hidden="true"></i>
- \f270
- <i class="fa fa-skype" aria-hidden="true"></i>
- \f17e
クレジットカード
- <i class="fa fa-cc-visa" aria-hidden="true"></i>
- \f1f0
- <i class="fa fa-cc-mastercard" aria-hidden="true"></i>
- \f1f1
- <i class="fa fa-cc-jcb" aria-hidden="true"></i>
- \f24b
- <i class="fa fa-cc-amex" aria-hidden="true"></i>
- \f1f3
- <i class="fa fa-cc-diners-club" aria-hidden="true"></i>
- \f24c
- <i class="fa fa-cc-paypal" aria-hidden="true"></i>
- \f1f4
機会少ないけど、どこかで使いたいアイコンフォント
- <i class="fa fa-apple" aria-hidden="true"></i>
- \f179
- <i class="fa fa-dropbox" aria-hidden="true"></i>
- \f16b
- <i class="fa fa-codepen" aria-hidden="true"></i>
- \f1cb
- <i class="fa fa-dribbble" aria-hidden="true"></i>
- \f17d
- <i class="fa fa-git" aria-hidden="true"></i>
- \f1d3
- <i class="fa fa-github" aria-hidden="true"></i>
- \f09b
- <i class="fa fa-jsfiddle" aria-hidden="true"></i>
- \f1cc
- <i class="fa fa-vine" aria-hidden="true"></i>
- \f1ca
- <i class="fa fa-camera-retro" aria-hidden="true"></i>
- \f083
Webサイト制作で使用頻度の高いものから、こんなアイコンもあるんだっていうものまでご紹介してみました。 Appleや、 Amazonのロゴマークもあったんですね。いつも見ているんですけど今回初めて知りました。
この記事をいつでも確認できるように、ブックマークしておいてください。
![flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン](https://web-bruno.com/wp-content/uploads/2016/10/flexbox.png)
