2020年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ

Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。

Font Awesome アイコンの使い方と便利な機能のまとめ

Font Awesome guide and useful tricks you might not know about.
by Kiss Patrik

下記は各ポイントを意訳・加筆したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Font Awesomeとは

Font Awesomeは多くの人が知っており、毎日使っている人もいると思います。

知らない人のために簡単に説明すると、Font AwesomeはWebサイトやスマホアプリ用の素晴らしいアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できます。

サイトのキャプチャ

Font Awesome

ここで紹介するアイコンはSVGですが、心配しないでください。SVGについての知識は必要ありません。それでは、始めましょう!

Font Awesomeのアイコンには、4つのスタイルがあります。

SolidとBrandsのほとんどのアイコンは無料で利用できますが、他の3つのスタイルはプロ版(有料)です。

Font Awesomeへの登録方法・アイコンの基本的な使い方

Font Awesome アイコンを使用するには、登録(無料)が必要です。
まずは、下記ページにアクセスし、登録をします。

サイトのキャプチャ

Font Awesome

「Start for Free」をクリックして、メールアドレスを入力します。

サイトのキャプチャ

メールアドレスの登録

メールアドレスを入力し「Send Kit Code」をクリックすると、メールが届くので、「Click to Confirm」をクリックして認証をします。

サイトのキャプチャ

メールアドレスの認証

認証が完了すると、パスワードの設定です。

サイトのキャプチャ

パスワードの設定

続いて、名前を登録します。

サイトのキャプチャ

名前の登録

これで、Font Awesomeへの登録は完了です。

サイトのキャプチャ

登録の完了

Font Awesomeを使用するためのコードが発行されるので、コピペして利用できます。アイコンを使用するHTMLに下記のコードをコピペして利用してください。

コードは自分のアカウントページからいつでも再発行・再生成でき、新しく作成することもできます。

サイトのキャプチャ

アカウントページ

アイコンを使用する時の基本書式を見てましょう。

アイコンを配置するにはiタグを使用し、classで使用するアイコンを指定します。

Font Awesomeの基礎知識はこれだけです。Font Awesomeが提供する本当に便利な機能を紹介します。

Font Awesome アイコンのサイズの指定方法

なんと、Font Awesomeではclassで指定するだけで、アイコンのサイズも簡単に変更できます。サイズ用のCSSを記述したり、アイコンを修正する必要はありません!

実際にやってみましょう。アイコンのサイズ指定は、classを加えるだけです。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンのサイズ変更

アイコンをサイズ変更する.fa-#xは、2-10の値を利用できます。各classのフォントサイズは、下記の通りです。

class size memo
fa-xs .75em
fa-sm .875em
fa-lg 1.33em vertical-align: -25%が適用される
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

簡単でしょ。

Font Awesome リスト用のアイコン

リスト要素のビュレットをアイコンにするのも簡単です。
ul要素に.fa-ulを加え、アイコンを.fa-liのspan要素で内包します。

このコードで下記のアイコンを実装できます。
全部同じアイコンにすることも、全部異なるアイコンにすることもできます。

Font Awesomeのアイコン

リスト用のアイコン

Font Awesome アイコンの回転

アイコンを回転させたい時はありませんか?
Font AwesomeではCSSのtransformプロパティを使用せずに、アイコンを回転・反転させることもできます。そうです、classを加えるだけです!

回転する角度は.fa-rotate-#、水平・垂直の反転は.fa-flip-#で指定します。

class 角度
fa-rotate-90 90度
fa-rotate-180 180度
fa-rotate-270 270度
fa-flip-horizontal アイコンを水平に反転
fa-flip-vertical アイコンを垂直に反転
fa-flip-both アイコンを水平・垂直に反転

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンの回転

Font Awesome アイコンのアニメーション

Font Awesomeのアイコンはclassを加えるだけで、スピン(.fa-spin)やパルス(.fa-pulse)などのアニメーションをアイコンに与えることもできます。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

左: スピン、右: パルスのアニメーション

Font Awesome アイコンを重ねる

Font Awesomeのアイコンは重ねて使用することもできます。
親要素に.fa-stackを加え、重ねたいアイコンを通常通りに配置するだけです。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンを重ねる

Font Awesome アイコンのスケーリング

ここからは、JSバージョンのFont Awesomeが必要です。

スケーリングは親要素に影響を与えることなく、アイコンのサイズを変更します。アイコンを拡大・縮小するには.grow-#, .shrink-#を使用し、小数を含む任意の値を定義できます。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

親要素はそのまま、アイコンのみサイズ変更

Font Awesome アイコンの位置調整

配置は親要素に影響を与えることなく、アイコンの位置を調整できます。アイコンを上下左右に移動させるには、.up-#, .down-#, .left-#, .right-#を使用し、小数を含む任意の値を定義できます。
CSSの絶対配置のような感じですね。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンの位置調整

Font Awesome アイコンのマスク

この機能は「アイコンを重ねる」と同様に、2つのアイコンを1つにまとめることができます。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンのマスク

以下の2つのアイコンを1つにまとめています。

classには上記の例に従って、内側のアイコンは.fasと.fa-pencil-altです。data-fa-mask属性には外側のアイコンのclassを指定します。この場合は、.fasと.fa-commentです。

Font Awesome アイコンの上にテキストを配置

Font Awesome アイコンの上にテキストを配置することもできます。

アイコンを.fa-layersのspan要素で内包し、テキストは.fa-layers-textのspan要素で内包します。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンの上にテキストを配置

Font Awesome アイコンの上にカウンターを配置

アイコンに数字のカウンターを追加することもできます。例えば、受信したメッセージの数を封筒アイコンに表示させたい時などです。

アイコンの上にテキストを配置とほぼ同じで、.fa-layers-textの代わりに.fa-layers-counterを使用します。

このコードで下記のアイコンを実装できます。

Font Awesomeのアイコン

アイコンの上にカウンターを配置

カウンターはデフォルトで右上隅に配置されますが、他の場所に配置することもできます。.fa-layers-bottom-left, .fa-layers-bottom-right, .fa-layers-top-left、およびデフォルトの.fa-layers-top-rightで配置でき、オーバーフローテキストは省略記号で切り捨てられます。

sponsors

top of page

©2020 coliss