【保存版】Font Awesome アイコンの使い方と便利な機能のまとめ
Post on:2020年1月9日
sponsors
Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。
Font Awesome guide and useful tricks you might not know about.
by Kiss Patrik
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- Font Awesomeとは
- Font Awesome アイコンのサイズの指定方法
- Font Awesome リスト用のアイコン
- Font Awesome アイコンの回転
- Font Awesome アイコンのアニメーション
- Font Awesome アイコンを重ねる
- Font Awesome アイコンのスケーリング
- Font Awesome アイコンの位置調整
- Font Awesome アイコンのマスク
- Font Awesome アイコンの上にテキストを配置
- Font Awesome アイコンの上にカウンターを配置
Font Awesomeとは
Font Awesomeは多くの人が知っており、毎日使っている人もいると思います。
知らない人のために簡単に説明すると、Font AwesomeはWebサイトやスマホアプリ用の素晴らしいアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できます。
ここで紹介するアイコンはSVGですが、心配しないでください。SVGについての知識は必要ありません。それでは、始めましょう！
Font Awesomeのアイコンには、4つのスタイルがあります。
- Solid
- Regular
- Light
- Duotone
Solidのアイコンのほとんどは無料で利用できますが、他の3つのスタイルはプロ版（有料）です。
アイコンを使用する時の基本書式を見てましょう。
|
1 |
<i class="fa[スタイルの頭文字(s|r|l|d)] fa-[アイコンの名前]"></i> |
アイコンを配置するにはiタグを使用し、classで使用するアイコンを指定します。
Font Awesomeの基礎知識はこれだけです。Font Awesomeが提供する本当に便利な機能を紹介します。
Font Awesome アイコンのサイズの指定方法
なんと、Font Awesomeではclassで指定するだけで、アイコンのサイズも簡単に変更できます。サイズ用のCSSを記述したり、アイコンを修正する必要はありません！
実際にやってみましょう。アイコンのサイズ指定は、classを加えるだけです。
|
1 2 3 4 5 6 7 8 |
<i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-5x"></i> <i class="fas fa-camera fa-7x"></i> <i class="fas fa-camera fa-10x"></i> |
このコードで下記のアイコンを実装できます。
アイコンのサイズ変更
アイコンをサイズ変更する.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要素で内包します。
|
1 2 3 4 5 6 |
<ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul> |
このコードで下記のアイコンを実装できます。
全部同じアイコンにすることも、全部異なるアイコンにすることもできます。
リスト用のアイコン
Font Awesome アイコンの回転
アイコンを回転させたい時はありませんか？
Font AwesomeではCSSのtransformプロパティを使用せずに、アイコンを回転させることもできます。そうです、classを加えるだけです！
|
1 2 3 4 5 6 7 8 9 |
<div class="fa-4x"> <i class="fas fa-snowboarding"></i> <i class="fas fa-snowboarding fa-rotate-90"></i> <i class="fas fa-snowboarding fa-rotate-180"></i> <i class="fas fa-snowboarding fa-rotate-270"></i> <i class="fas fa-snowboarding fa-flip-horizontal"></i> <i class="fas fa-snowboarding fa-flip-vertical"></i> <i class="fas fa-snowboarding fa-flip-both"></i> </div> |
回転する角度は.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のアイコンはclassを加えるだけで、スピン（.fa-spin）やパルス（.fa-pulse）などのアニメーションをアイコンに与えることもできます。
|
1 2 |
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> |
このコードで下記のアイコンを実装できます。
左: スピン、右: パルスのアニメーション
Font Awesome アイコンを重ねる
Font Awesomeのアイコンは重ねて使用することもできます。
親要素に.fa-stackを加え、重ねたいアイコンを通常通りに配置するだけです。
|
1 2 3 4 |
<span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> |
このコードで下記のアイコンを実装できます。
アイコンを重ねる
Font Awesome アイコンのスケーリング
ここからは、JSバージョンのFont Awesomeが必要です。
スケーリングは親要素に影響を与えることなく、アイコンのサイズを変更します。アイコンを拡大・縮小するには.grow-#, .shrink-#を使用し、小数を含む任意の値を定義できます。
|
1 2 3 4 5 |
<div class="fa-4x"> <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fas fa-seedling" style="background:MistyRose"></i> <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i> </div> |
このコードで下記のアイコンを実装できます。
親要素はそのまま、アイコンのみサイズ変更
Font Awesome アイコンの位置調整
配置は親要素に影響を与えることなく、アイコンの位置を調整できます。アイコンを上下左右に移動させるには、.up-#, .down-#, .left-#, .right-#を使用し、小数を含む任意の値を定義できます。
CSSの絶対配置のような感じですね。
|
1 2 3 4 5 6 7 |
<div class="fa-4x"> <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i> <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i> <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i> <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i> </div> |
このコードで下記のアイコンを実装できます。
アイコンの位置調整
Font Awesome アイコンのマスク
この機能は「アイコンを重ねる」と同様に、2つのアイコンを1つにまとめることができます。
|
1 2 3 |
<div class="fa-4x"> <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i> </div> |
このコードで下記のアイコンを実装できます。
アイコンのマスク
以下の2つのアイコンを1つにまとめています。
|
1 |
<i class="fas fa-comment"></i> |
|
1 |
<i class="fas fa-pencil-alt"></i> |
classには上記の例に従って、内側のアイコンは.fasと.fa-pencil-altです。data-fa-mask属性には外側のアイコンのclassを指定します。この場合は、.fasと.fa-commentです。
Font Awesome アイコンの上にテキストを配置
Font Awesome アイコンの上にテキストを配置することもできます。
アイコンを.fa-layersのspan要素で内包し、テキストは.fa-layers-textのspan要素で内包します。
|
1 2 3 4 5 6 7 8 9 |
<span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-calendar"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> </span> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-certificate"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span> </span> |
このコードで下記のアイコンを実装できます。
アイコンの上にテキストを配置
Font Awesome アイコンの上にカウンターを配置
アイコンに数字のカウンターを追加することもできます。例えば、受信したメッセージの数を封筒アイコンに表示させたい時などです。
アイコンの上にテキストを配置とほぼ同じで、.fa-layers-textの代わりに.fa-layers-counterを使用します。
|
1 2 3 4 |
<span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-envelope"></i> <span class="fa-layers-counter" style="background:Tomato">1,419</span> </span> |
このコードで下記のアイコンを実装できます。
アイコンの上にカウンターを配置
カウンターはデフォルトで右上隅に配置されますが、他の場所に配置することもできます。.fa-layers-bottom-left, .fa-layers-bottom-right, .fa-layers-top-left、およびデフォルトの.fa-layers-top-rightで配置でき、オーバーフローテキストは省略記号で切り捨てられます。
sponsors
