便利ツールを使う

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

【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アイコンを

  • 重ねる
  • 囲う

手順と方法でした!

  • この記事を書いた人
  • 最新記事

まめこ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-便利ツールを使う
-, ,