私のコーデイングバイブル

FontAwesomeの初期設定

FontAwesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富で、コーデイングの際には本当によく使います。
ただ、疑似要素（::beforeや::after）に記述したりなど、使い方にコツがあったりします。
私なりの使い方のコツを解説します。無料版と有料版がありますが、無料版で十分です。
FontAwesome公式サイト：https://fontawesome.com/

FontAwesomeとは・・・

Webサイトでアイコンフォントを簡単に導入することができるサービスです。
アイコンフォントとは、アイコン画像をテキストと同じように表示することができる優れたものです。

FontAwesomeを使うメリット

FontAwesomeを読み込む方法

現在、FontAwesomeを読み込む方法には２通りになっています。
1.「Kit」を使って読み込む
2.ダウンロードする

Kitを使って読み込む

1.FontAwesomeでアカウントを作成してログイン後に「Kit」をクリックする
2.手順に沿って設定していくとscriptタグで囲まれたコードが表示されます
3.これを内に貼り付けます

ダウンロードする

1.サイト上で「Downroad」をクリック
2.「Free For Web」を選びダウンロード
3.zipファイルを解凍して保存
4.cssフォルダ内の「all.css」ファイルを作業中のcssフォルダにコピペする
5.headタグ内で読み込む

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	Availability	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倍のサイズで表示されます。