本サイトはアフィリエイト広告を利用しています

FontAwesome:アイコンの上に文字を重ねる

- PR -

アイコンの上にアイコンを重ねるのではなく、アイコンの上に文字を重ねる。

単純に好奇心からやってみただけですが、「出来た!」ので、メモ、メモ…。

すぐに使う予定はないものの、丸アイコン(fa-circle)の上に、漢字や平仮名を重ねられるのは、どこかで使いどころがあるかもしれません。

CSSを使って正円を作る方法はありますが、FontAwesomeのアイコンを使えば、重ねるためのクラスは用意されています。色もサイズも変えられるので、いざという時のために知っていると便利かも。

もちろん土台になるのは丸アイコンだけじゃないので、アイデア次第で結構使えるかもしれません。

おすすめ書籍

基本の重ね方(Stack Icons)

FontAwesomeでは、2つのアイコンを重ねて表示するクラスが用意されています。

基本的には、次のように記述します。

アイコンを重ねる(基本形)

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
解説
  • 2つのFontAwesomeフォントアイコンを用意します。
  • 通常サイズのアイコンにfa-stack-1xクラスを追加します。
  • 大きく表示するアイコンにfa-stack-2xクラスを追加します。
  • 2つのアイコンをspan または divなどの親要素ではさみ、fa-stackクラスを追加します。
  • fa-stack-1xを指定したアイコンにfa-inverseクラスを追加すると、色を反転させることができます。

アイコンの上に文字を重ねる

塗り潰しの丸

[使用アイコン] circle :  <i class="fas fa-circle"></i>

正円の中に文字

<p><span class="fa-stack">
   <i class="fas fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse">あ</i>
</span></p>
サイズ・色の変更

<p><span class="fa-stack fa-2x">
   <i class="fas fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse">愛</i>
</span></p>

<p><span class="fa-stack" style="font-size: 3em;">
   <i class="fas fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse">愛</i>
</span></p>

<p><span class="fa-stack fa-2x" style="color: tomato;">
   <i class="fas fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse">愛</i>
</span></p>

はあるのかい?

<p>
<span class="fa-stack fa-2x" style="color: tomato;">
   <i class="fas fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse">愛</i>
</span>
はあるのかい?
</p>

白抜きの丸

[使用アイコン] circle: <i class="far fa-circle"></i>

白抜き丸 + 漢字

<span class="fa-stack fz-48px" style="color: tomato;">
   <i class="far fa-circle fa-stack-2x"></i>
   <i class="fas fa-stack-1x">秘</i>
</span>

ファイルアイコン

[使用アイコン] <i class="far fa-file"></i>

Solidスタイル

xlsx

<span class="fa-stack fa-2x" style="color: #191970;">
   <i class="far fa-file fa-stack-2x"></i>
   <i class="fas fa-stack-1x fz-18px">xlsx</i>
</span>

[使用アイコン] <i class="fas fa-file"></i>

Regularタイプ

txt

<span class="fa-stack fa-2x" style="color: skyblue;">
   <i class="fas fa-file fa-stack-2x"></i>
   <i class="fas fa-stack-1x fa-inverse fz-18px">txt</i>
</span>
タイトルとURLをコピーしました