【Font Awesome 5】content:として利用する時も画像を重ねることは可能でしょうか？

Question

Font Awesome 5 Freeです。

Awesomeの画像を重ねる場合にspanタグで挟む方法は沢山情報ありますが、
以下のようにcontents:'unicode' の形で重ねる方法はあるでしょうか？

.before-icon-setting::before {
    content: '\f013'; /* この部分を別画像と重ねたい */
}

ご存じの方居ましたら教えて下さい。
宜しくお願いします。

【指摘により補足を追加】
Awesomeのアイコン同士を重なるということです。
以下のようにHTML側から重ねることは出来ますが、

    <span class="fa-stack fa-3x" style="color:red;">
		<i class="far fa-circle fa-stack-2x"></i>
		<i class="fas fa-gift fa-stack-1x"></i>
	</span>

これをcss側から同じことが出来ないでしょうか？

素人につき見当違いの質問してたらすみません。

Comments

[maisumakun]

Font Awesomeのアイコン同士を重ねる、という理解で間違いないでしょうか？

[m.ts10806]

具体的にどういう結果としたいのか図示してください。

[pecchan]

maisumakun様
はい、その通りです。

m.ts10806様
追記しました。

Answer 1

これをcss側から同じことが出来ないでしょうか？

方法はひとつじゃないと思いますが、例えば…
外側の要素をposition:relative、内側をposition:absoluteにすれば、
内側の要素の、外側要素に対する相対位置を、leftとtopで
調整できるようになります。

Awesomeの画像を重ねる場合にspanタグで挟む方法は沢山情報ありますが、

これも、結局のところ、上記と同じようなことをやってます。

• .fa-stackが、position:relative
• .fa-stack-2xや.fa-stack-1xが、position:absolute

以下は、Firefoxの開発者ツールで、調べたスクショです。
参考になると思いますよ。

Comments

[pecchan]

>外側の要素をposition:relative、内側をposition:absoluteにすれば
なるほど。思いつきませんでした。

fa-stackを使う場合も実は同じようなことをやっていたんですね。

面白いです、とても参考になりました！有難う御座います！