Webサイトでは様々なアイコンを使用します。画像のアイコンを使う方法もありますが、アイコンフォントのFont Awesomeを使うととても便利です。
Font Awesomeは特定のHTMLを追加するだけでアイコンを表示することが出来ます。しかも、そのアイコンはCSSで色やサイズを指定することが出来ます。色違いのアイコン画像を複数用意する必要がなくなります。
さっそく、Font Awesomeの使い方を解説していきたいと思います。
目次
WebサイトでFont Awesomeを使う方法
まずはWebサイトでFont Awesomeを使う方法を解説します。
公式サイトからFont Awesomeをダウンロードする
公式サイトからFont Awesomeのファイル一式をダウンロードします。
「Download Font Awesome Free for the Web」のボタンをクリックしたらダウンロード出来ます。
HTMLファイルにFont AwesomeのCSSを読み込む
ダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。
- webfonts
- svgs
- sprites
- scss
- metadata
- less
- js
- css
この中の「webfonts」と「CSS」のフォルダを自分のプロジェクトフォルダにコピーします。そして、HTMLファイルに「CSS」フォルダ内のall.min.cssファイルを読み込みます。
<head>
<meta charset="UTF-8">
<title>Font Awesomeのデモ</title>
<!-- Font AwesomeのCSSを読み込む -->
<link rel="stylesheet" href="css/all.min.css">
</head>Font Awesomeのアイコンを表示する
Font Awesomeで使えるアイコンは以下のページで確認できます。
左サイドバーの「Free」にチェックを入れると、無料で使えるアイコンだけが表示されます。
使いたいアイコンをクリックするとアイコンの詳細ページに遷移します。そのページの「Start Using This Icon」のボタンをクリックすると、アイコンを表示するためのHTMLコードが表示されるのでコードをコピーします。
コピーしたコードをHTMLファイルにペーストするとアイコンが表示されます。
<body>
<p><i class="fas fa-chevron-circle-right"></i> Font Awesomeのアイコンを表示しました</p>
</body>たったこれだけの作業でFont Awesomeのアイコンを表示することが出来ます。
CSSでFont Awesomeアイコンのスタイルを変更する
Font AwesomeのアイコンはCSSでスタイルを指定することが出来ます。例えば、アイコンを赤色にしたい場合はCSSで以下のように指定します。
※クラス名は使用するアイコンによって異なります。
.fa-chevron-circle-right {
color: red;
}アイコンのサイズを変更したい場合はCSSで以下のように指定します。
.fa-chevron-circle-right {
font-size: 2em;
}CSSを駆使することで他にも色々なことが出来るので試してみてください。
PhotoshopやIllustratorでFont Awesomeを使う方法
デザインカンプを作る際に、PhotoshopやIllustratorでもFont Awesomeのアイコンを使いたいことがあります。PCにFont Awesomeのアイコンフォントをインストールすることで簡単に使えるようになるので、その方法を解説します。
公式サイトからFont Awesomeのフォントファイルをダウンロードする
公式サイトからFont Awesomeのフォントファイルをダウンロードします。
「Download Font Awesome Free for the Desktop 」のボタンをクリックしたらダウンロード出来ます。
Font Awesomeのフォントをインストールする
ダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。
- otfs
- svgs
- metadata
この中の「otfs」フォルダ内に3つのフォントファイルがあるので全てインストールします。
PhotoshopやIllustratorでFont Awesomeのフォントを表示する
Font Awesomeのアイコン一覧から使いたいアイコンをクリックします。
アイコンの詳細ページ上部の小さいアイコンをクリックすると、フォントを表示するためのUnicodeがコピーされます。
PhotoshopやIllustratorのテキストツールで、先ほどコピーしたUnicodeをペーストします。おそらく初期状態では「
」が表示されていると思います。
フォントファミリー を先ほどインストールした「Font Awesome 5 Free Solid」に変更するとアイコンが表示されます。
使用するアイコンによっては、フォントファミリー を「Font Awesome 5 Free Regular」か「Font Awesome 5 Brands Regular」にする必要があります。「Font Awesome 5 Free Solid」でアイコンが表示されない場合は、「Font Awesome 5 Free Regular」か「Font Awesome 5 Brands Regular」のどちらかに変更してみてください。
Font Awesomeの使い方まとめ
Font AwesomeはWebサイトでもPhotoshopやIllustratorなどのデザインソフトでも簡単にアイコンを表示することが出来ます。Font Awesomeを使い始めてからは、便利すぎてWebサイトのアイコンはほぼFont Awesomeのアイコンを使っています。
作業効率も格段に上がりますので、ぜひ使ってみてください。