FontAwesomeのアイコンを使おうとして、うまく表示されないことがままある。
調べてみたら、CSSの書き方にもコツがあることがわかったので、備忘録。

【参考】FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）

基本的に、FontAwesomeのアイコンフォントを呼び出すときは
HTMLの中に＜i＞タグを記述するか、

<i class="fas fa-phone"></i>

CSSに「:after」や「:before」で記述するか、ですが。

.footernav li a:before {
	content: "\f138";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #66cccc;
	padding-right: 2px;

今回は、「font-weight」が無かったために表示されていませんでした。
必ず指定しなければいけないらしいです、font-weight。
しかもFREE版の場合は二者択一。
Brandsは「400」
Solidは「900」

これはちょっと・・・
公式をいちいち見にいくのが面倒くさくてよく使うアイコンをメモ帳に書き出してる私なんかには、落とし穴でしかないんですが・・・
とりあえずどっちか入れといて出なかったらもういっこの数値に変えてみればいいか・・・

あと、「font-family」も「Free」まで入れないと出ないです。検証済。

こんなふうに、コピペしてきたソースが「以前はこれで大丈夫だったんだけどなぁ」的なオチになるんですよね、ウェブ業界って。
そんなに昔の記事でもないのにね。

そんなに昔じゃない証拠に、アイコンフォントで検索して出てくる記事は「ウェブ」「アイコン」「フォント」の並び順がバラバラ。
書く人によって呼び方が違うくらいには、まだ世間で定着しきれてないってことだと思う。

だれか正式名称おしえてくれ。