FontAwesomeの設定
FontAwesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富で、コーデイングの際には本当によく使います。
ただ、疑似要素（::beforeや::after）に記述したりなど、使い方にコツがあったりします。
私なりの使い方のコツを解説します。
無料版と有料版がありますが、無料版で十分です。
FontAwesome公式サイト：https://fontawesome.com/
FontAwesomeとは・・・
Webサイトでアイコンフォントを簡単に導入することができるサービスです。
アイコンフォントとは、アイコン画像をテキストと同じように表示することができる優れたものです。
FontAwesomeを使うメリット
- 簡単な記述でアイコンを表示することができる
- テキストと同じようにサイズや色を変えられる
- サイズを大きくしても画像が粗くならない
- 無料でも１０００種類以上用意されている
FontAwesomeを読み込む方法
現在、FontAwesomeを読み込む方法には２通りになっています。
- 「Kit」を使って読み込む
- ダウンロードする
Kitを使って読み込む
- FontAwesomeでアカウントを作成してログイン後に「Kit」をクリックする
- 手順に沿って設定していくと<script>タグで囲まれたコードが表示されます
- これを<head>内に貼り付けます。
ダウンロードする
- サイト上で「Downroad」をクリック
- 「Free For Web」を選びダウンロード
- zipファイルを解凍して保存
- cssフォルダ内の「all.css」ファイルを作業中のcssフォルダにコピペする
- <head>タグ内で読み込む
- <link rel=”stylesheet” href=”css/all.css”>
FontAwesomeの使い方
「Icon」ボタンをクリックすると次の画面が出てきます。
最も早い検索方法は、検索窓に英単語を入れることです。
残念ながら日本語対応していないので、「日本語（例：棒）＋英語」のキーワードを使ってグーグル検索してください。
数が多いので検索に時間がかかりますが、上部に「Solid」「Regular」「Light」「Thin」「Duotone」の５種類の太さを選ぶボタンと「Brands」ボタンを使う方法があります。
太さは後で選びなおすことができますので安心してください。
アイコンを表示する
使用したいアイコンをクリックする。
上部に太さを変えるボタンがありますね。
黒枠の中に下記コードがあるのでHTMLの張り付けたい場所にコピペするだけです。
<i class="fa-duotone fa-hockey-sticks"></i>スタイルを変更したい場合は、任意のクラスを指定するなどして、通常通りCSSでスタイルを指定すれば色やサイズなどを変えることができます。
疑似要素でアイコンを表示する
疑似要素というと ::before や ::after があります。
先ずはHTMLタグにクラスを付けます。
<button class="button-icon"></button>疑似要素を使用する際は親クラスに position: relative; を忘れずに設定してください。
これで、親要素の中では自由に配置することができます。
contentの中にはunicode（ユニコード）を記述します。
を表示する」画像内の右上にある「f454」です。
.button-icon {
position: relative;
}
.button-icon::before {
position: absolute;
content: "\f454";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 0;
left: 0;
}※注意点としてcontentの中にあるバックスラッシュはWindowsでは表示されないので「￥」を使いましょう！！
Freeをお使いの方はfont-weightを900もしくは400にしか設定できません。
| Style | Availabillity | font-weight |
|---|---|---|
| Solid | Free | 900 |
| Regular | Pro | 400 |
| Light | Pro | 300 |
| Brands | Free | 400 |
疑似要素でアイコンが表示されない？？
ここまで来たら問題が発生しているはずです。
理由は、思わずPro版を使用しているからです。
Free版を選択するには「FontAwesomeの使い方」の画面左に「Free」という文字がありますのでクリック。
すると、今度はFreeで使えるアイコンが表示されます。
使えるアイコン数は減りますが、これで疑似要素で問題なく使えるようになります。
Font Awesomeのカスタマイズ
アイコンの色を変更する
直接htmlに直接記述する方法。
<i class="fa-brands fa-sticker-mule" style="color:red;"></i>cssの場合は「i」タグに対して記述すればOKです。
i {
color: red;
}アイコンのサイズを変更する
HTMLでサイズを指定する際はクラス名を記述します。
| クラス名 | 表示サイズ |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| 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のアイコンは、それぞれ横幅が異なるためそのまま使用すると並べた時にガタガタしてしまいます。
そこで、「fa-fw」というクラス名を追加すれば解消されます。
リストで使う場合
アイコンをリストで使用する場合には、ulタグ、もしくはolタグのクラス名にfa-ulを、liタグの中のiタグのクラス名にfa-liを指定します。
アイコンを回転・反転させる場合
| クラス名 | 角度・反転方向 |
|---|---|
| fa-rotate-90 | 90°回転 |
| fa-rotate-180 | 180°回転 |
| fa-rotate-270 | 270°回転 |
| fa-flip-horizontal | 水平方向に反転 |
| fa-flip-vertical | 垂直方向に反転 |
アイコンをアニメーションで動かす
回転するアニメーションと相性がいいのは、「Spinners」と呼ばれているアイコンです。
| クラス名 | アニメーション |
|---|---|
| fa-spin | アイコンを回転させる |
| fa-pulse | アイコンを8ステップで回転させる |
アイコンをテキストに回り込み表示する
文章の引用符に使用する場合などに、float属性を付与してテキストを回り込み表示させることができます。
| クラス名 | 挿入するクラス名 |
|---|---|
| float: left; | fa-pull-left |
| float: right; | fa-pull-right |
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>ボーダーをつける
アイコンにボーダーを付けたい場合は、fa-borderクラスを付与します。
<i class="fas fa-arrow-right fa-2x fa-border"></i>アイコンを重ねる
- 親要素に
fa-stackクラスを付与 - アイコンに
fa-stack-1x、もしくはfa-stack-2xクラスを付与
fa-stack-1xを指定すると等倍で、fa-stack-2xを指定すると2倍のサイズで表示されます。