北海道では初雪と冬の装いとなった近頃ですが、気付けばアイコンフォント「Font Awesome 5 Free」の最新 ver. が 5.5.0 になっていました。
このブログで初めてまとめた時にはまだ Ver.5.0.4 でした。
無料版で使えるアイコンの数も907種類から1409種類と約1.5倍に増えました。

ということで、疑似要素で使う方法についてもう少し詳しくまとめ直しました。
以下ページにまとめましたので、ご確認下さい。

要点だけまとめます

詳細はコチラの記事を参考にしてもらいたいのですが、せっかく来てくれたので簡単にまとめておきます。

contentには”\”でエスケープした文字コードを入力する

まずは、疑似要素の content プロパティに使いたいアイコンの文字コードをセットします。
この時、文字コードは通常の文字でないことを表すように “\” でエスケープしておきます。

例えば以下の鍵マークを表示するには、文字コードが “f23e” なので、content の値は “\f23e” とします。

.fa5free-expeditedssl::before{
	content : '\f23e'; /* 値は'や"で囲む */
	/* これだけでは表示されませんので下記注意点もご確認下さい */
}

font-family, font-weight を設定する

疑似要素で表示する場合は、content に文字コードをセットしただけでは表示できません。
font-family と font-weight を設定してやる必要があります。

これらの設定は、<i> タグでの表示コードの class 名から以下のように決まります。

例1）
<i class="far fa-comment"></i>
　↓
.comment-icon::before{
	content     : '\f075';
	font-family : 'Font Awesome 5 Free';
	font-weight : 400;
}
例2）
<i class="fas fa-share-alt"></i>
　↓
.share-icon::after{   /* 疑似要素はbegore/afterのどちらでも使える */
	content     : '\f1e0';
	font-family : 'Font Awesome 5 Free';
	font-weight : 900;
}
例3）
<i class="fab fa-twitter-square"></i>
　↓
.twitter-icon::before{
	content     : '\f081';
	font-family : 'Font Awesome 5 Brands';
	font-weight : 400;
}

Web系の技術記事そ今後は分けます

先日から、Web 制作に関する記事は https://web.analogstd.com/tips/ の方に投稿することにしました。
理由は色々ありますが、Wordpress で Web 技術系の記事をまとめるのが少し融通が利かないかなと感じていたからです。
自分で投稿機能などを作ったのでかなり自由度が高く、手軽に記事にまとめることができるようになりました。

これまでの記事は全てこちらのブログに残すので、追加記事やまとめ直し記事だけが新しい投稿場所になります。
しばらくはこの記事のようにこちらの記事にも簡単にまとめておきます。

RSSもやってます

RSS にも対応しているので、よければご活用下さい。

RSS URL : https://web.analogstd.com/tips/rss.xml

Feedly に登録 : こちらから登録