【Font Awesome④】Webアイコン同士を重ねて使う・枠で囲う方法と手順

Webアイコンを重ねる・動かす・ホバーする（クラス名：fa-stack）

Webアイコンを囲う手順と方法（クラス名：fa-border）

を書いていきます！

Webアイコン同士を重ねる

重ねて使う方法

わかりやすいように、重ねた色は別途色の設定をしています。

アイコンを重ねたい時は"fa-stack"クラス名を使用します。

<span class="fa-stack">
  <i class="fa-solid fa-heart fa-stack-2x"></i>
  <i class="fa-solid fa-thumbs-up fa-stack-1x"></i>
</span>

• <span>タグの中に"fa-stack"クラスを入れる
• <span>タグの中に「Webアイコンを2つ」入れる
• 背面にするアイコンに"fa-stack-2x"のクラスを追加
• 表面にするアイコンに"fa-stack-1x"のクラスを追加

色とサイズを変える方法

アイコンはデフォルトでお互いに黒色なので、色を変えます！

WordPressの「外観」＞「カスタマイズ」＞「追加CSS」もしくは、「外観」＞「テーマファイルエディター」＞「Style.css」に作成します。

//自分でCSSにカラー設定を作成・追加する
.tomato-color { color: #ff6347; }
.white-color { color: #ffffff; }

作成した「色」をWebアイコンに適用させるため、「色のクラス名」を追加します。

<span class="fa-stack">
  <i class="fa-solid fa-heart fa-stack-2x tomato-color"></i>
  <i class="fa-solid fa-thumbs-up fa-stack-1x white-color"></i>
</span>

ブラウザ表示：

サイズを大きくしたい場合は<span>タグの中にサイズのクラス名を追加します。

<span class="fa-stack fa-3x">

各Webアイコンに、サイズのクラス名を入れると、ずれが生じるので<span>にいれるといいです

重ねてアニメーションする方法（応用）

「文字の大きさ」「アニメーション」「ホバー設定」は、Font Awesomeがクラスコードを提供してくれているので、それらを使用します。

//使用したコード
<span class="fa-stack fa-3x">
  <i class="fa-solid fa-heart fa-stack-2x tomato-color"></i>
  <i class="fa-solid fa-thumbs-up fa-stack-1x white-color faa-shake animated-hover"></i>
</span>

//コード説明
<span class="fa-stack 文字サイズ">
  <i class="fa-solid fa-heart fa-stack-2x 作成した色クラス名"></i>
  <i class="fa-solid fa-thumbs-up fa-stack-1x 作成した色クラス名 アニメーションクラス名 ホバー時のクラス名"></i>
</span>

//自分でCSSにカラー設定
.tomato-color { color: #ff6347; }
.white-color { color: #ffffff; }

//使用したコード
<span class="fa-stack fa-2xl">
  <i class="fa-solid fa-circle fa-stack-2x mizuiro-color"></i>
  <i class="fa-brands fa-twitter faa-wrench animated fa-stack-1x white-color"></i>
</span>

//自分でCSSにカラー設定
.mizuiro-color { color: #00bfff }
.white-color { color: #ffffff; }

Webアイコンを線で囲う

Webアイコンを線で囲うには、囲いたいアイコンにfa-borderのクラス名を追加します。

<i class="fa-solid fa-arrow-up-1-9 fa-border"></i>

Webアイコンを大きくしたい場合は、アイコンに文字サイズのクラス名を追加すると、このようにずれてしまいます。

<i class="fa-solid fa-arrow-up-1-9 fa-border fa-3x"></i>

なので、<span>で囲い親クラスの<span>に文字サイズの大きさを指定させます。

<span class="fa-3x">
 <i class="fa-solid fa-arrow-up-1-9 fa-border"></i>
</span>

まとめ

今回は、Font AwesomeのWebアイコンを

• 重ねる
• 囲う

手順と方法でした！