Font Awesome 5とは

ベクター画像で作成されたアイコン集で、閉じるボタンのような部品からFacebookやTwitterなどのSNSのアイコンまで揃っています。
Font Awesome 5からは下記のようにLINEのアイコンが収録されました。
https://fontawesome.com/icons/line?style=brands
以前はLINEだけ他のウェブフォントを採用する必要があったので、痒いところに手が届くバージョンアップだと感じています。
（画像出典：Font Awesome 5公式サイト）

実際に重ねてみた

本題の重ね方に入りましょう。

<span class="fa-layers fa-fw">

	<span class="fas fa-circle fa-5x" data-fa-transform="down-1"></span>

	<span class="fas fa-circle fa-5x"></span>

	<span class="far fa-file-alt fa-5x" data-fa-transform="shrink-7" data-fa-mask="fas fa-circle"></span>

</span>

.fa-circle:nth-of-type(1) {

    color: #ccc;

}



.fa-circle:nth-of-type(2) {

    color: #fff;

}



.fa-file-alt {

    color: #f2ef0b;

}

重ねるにあたっての肝は3点あります。
1）重ねたいアイコンをspanタグで囲む。
2）囲んだspanタグに"fa-layers"と"fa-fw"のclass属性を付与する。
3）タグの記述順序は底に表示させたいアイコンのタグをHTMLでは上に、表に表示させたいアイコンのタグをHTMLでは下に記述する。

たしかに便利だけれども…

JavaScript版では、下記のようにCSSの疑似要素として指定することができなくなったようです。

div:after {

	font-family: FontAwesome;

	content : "f21a";

}

それでもHTMLの記述でアイコンを重ねることができるのは非常に魅力的なので、読者の皆様も試してみてはいかがでしょうか。