アイコンを重ねる

FontAwesomeのクラスを使う

FontAwesomeでアイコンを重ねる場合、fa-stackクラスの要素内に２つのアイコンタグを設置します。最初に記述したアイコンタグが下になり、２つ目に記述したアイコンタグが上になります。fa-stack-2xやfa-stack-1xはアイコンの大きさを指定しているクラスで順番には関係ありません。ちなみにfa-inverseはアイコンの色を白にしているだけですので違う色を指定したい場合は削除してスタイルでcolorを指定してください。

<span class="fa-stack">
	<i class="fas fa-square fa-stack-2x"></i> <!-- 下のアイコン -->
	<i class="fas fa-envelope fa-stack-1x fa-inverse"></i>  <!-- 上のアイコン -->
</span>

CSSでスタイルを指定する

CSSでアイコンを重ねたい場合は、:beforeと:afterを使って２つのアイコンを表示します。:beforeには下のアイコン、:afterには上のアイコンのスタイル指定をおこないます。下記の例はFontAwesomeのクラスと同様の設定ですが、スタイルを変更することで自由にアイコンの重なりを扱えます。

<span class="icon"></span>

.icon{
	display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2em;
}

.icon:before, .icon:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	position: absolute;
	left: 0;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.icon:before{
	content: '\f0c8';
	font-size: 2em;
	color: #333;
}

.icon:after{
	content: '\f0e0';
	line-height: inherit;
	color: #fff;
}