Font Awesome 6 のスタイルいろいろ

参考にしたページ https://fontawesome.com/docs/web/style/styling

上記のページを参考に、Font Awesome で使えるいろいろなスタイルを試してみました。

このサイトでは Font Awesome 6 を使っています。(記事投稿時点)

サイズを指定 ( xs / sm / lg / xl )

<p><i class="fa-solid fa-dog fa-2xs"></i>わんわん</p>

わんわん フォントサイズ 0.625em

<p><i class="fa-solid fa-dog fa-xs"></i>わんわん</p>

わんわん フォントサイズ 0.75em

<p><i class="fa-solid fa-dog fa-sm"></i>わんわん</p>

わんわん フォントサイズ 0.875em

<p><i class="fa-solid fa-dog"></i>わんわん</p>

わんわん

<p><i class="fa-solid fa-dog fa-lg"></i>わんわん</p>

わんわん フォントサイズ 1.25em

<p><i class="fa-solid fa-dog fa-xl"></i>わんわん</p>

わんわん フォントサイズ 1.5em

<p><i class="fa-solid fa-dog fa-2xl"></i>わんわん</p>

わんわん フォントサイズ 2em

サイズを指定 (倍数指定 fa-*x)

<p><i class="fa-solid fa-dog fa-1x"></i>わんわん</p>

わんわん フォントサイズ 1em

<p><i class="fa-solid fa-dog fa-2x"></i>わんわん</p>

わんわん フォントサイズ 2em

<p><i class="fa-solid fa-dog fa-3x"></i>わんわん</p>

わんわん フォントサイズ 3em

<p><i class="fa-solid fa-dog fa-4x"></i>わんわん</p>

わんわん フォントサイズ 4em

<p><i class="fa-solid fa-dog fa-5x"></i>わんわん</p>

わんわん フォントサイズ 5em

<p><i class="fa-solid fa-dog fa-6x"></i>わんわん</p>

わんわん フォントサイズ 6em

<p><i class="fa-solid fa-dog fa-7x"></i>わんわん</p>

わんわん フォントサイズ 7em

<p><i class="fa-solid fa-dog fa-8x"></i>わんわん</p>

わんわん フォントサイズ 8em

<p><i class="fa-solid fa-dog fa-9x"></i>わんわん</p>

わんわん フォントサイズ 9em

<p><i class="fa-solid fa-dog fa-10x"></i>わんわん</p>

わんわん フォントサイズ 10em

固定幅

クラス fa-fw を指定すると固定幅になる。

<div><i class="fa-solid fa-house fa-2x"></i>ホーム</div>
<div><i class="fa-solid fa-sitemap fa-2x"></i>サイト案内</div>
<div><i class="fa-solid fa-building fa-2x"></i>賃貸物件</div>
<div><i class="fa-solid fa-rss fa-2x"></i>ブログ</div>
<div><i class="fa-regular fa-envelope fa-2x"></i>お問合せ</div>
ホーム
サイト案内
賃貸物件
ブログ
お問合せ
<div><i class="fa-solid fa-house fa-2x fa-fw"></i>ホーム</div>
<div><i class="fa-solid fa-sitemap fa-2x fa-fw"></i>サイト案内</div>
<div><i class="fa-solid fa-building fa-2x fa-fw"></i>賃貸物件</div>
<div><i class="fa-solid fa-rss fa-2x fa-fw"></i>ブログ</div>
<div><i class="fa-regular fa-envelope fa-2x fa-fw"></i>お問合せ</div>
ホーム
サイト案内
賃貸物件
ブログ
お問合せ
<div class="fa-buttons">
<span><i class="fa-solid fa-house"></i></span>
<span><i class="fa-solid fa-sitemap"></i></span>
<span><i class="fa-solid fa-building"></i></span>
<span><i class="fa-solid fa-rss"></i></span>
<span><i class="fa-regular fa-envelope"></i></span>
</div>
<div class="fa-buttons">
<span><i class="fa-solid fa-house fa-fw"></i></span>
<span><i class="fa-solid fa-sitemap fa-fw"></i></span>
<span><i class="fa-solid fa-building fa-fw"></i></span>
<span><i class="fa-solid fa-rss fa-fw"></i></span>
<span><i class="fa-regular fa-envelope fa-fw"></i></span>
</div>
/* CSS */
.fa-buttons span {
border: 1px solid #ccc;
border-radius: 0.25em;
padding: 0.5em;
}

.fa-buttons span i {
    margin-right: 0;
}

リスト

固定幅になる。

<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-house"></i></span>ホーム</li>
<li><span class="fa-li"><i class="fa-solid fa-sitemap"></i></span>サイト案内</li>
<li><span class="fa-li"><i class="fa-solid fa-building"></i></span>賃貸物件</li>
<li><span class="fa-li"><i class="fa-solid fa-rss"></i></span>ブログ</li>
<li><span class="fa-li"><i class="fa-regular fa-envelope"></i></span>お問合せ</li>
</ul>
  • ホーム
  • サイト案内
  • 賃貸物件
  • ブログ
  • お問合せ

アイコンを回転・反転

90度ずつ回転させる。

<div class="fa-3x">
<i class="fa-solid fa-paw"></i>
<i class="fa-solid fa-paw fa-rotate-90"></i>
<i class="fa-solid fa-paw fa-rotate-180"></i>
<i class="fa-solid fa-paw fa-rotate-270"></i>
</div>

水平・垂直に反転させる。

<div class="fa-3x">
<i class="fa-solid fa-person-running"></i>
<i class="fa-solid fa-person-running fa-flip-horizontal"></i>
<i class="fa-solid fa-person-running fa-flip-vertical"></i>
<i class="fa-solid fa-person-running fa-flip-both"></i>
</div>

回転させる角度を指定する。

<div class="paws">
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 70deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 110deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 70deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 110deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 70deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 110deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 70deg;"></i>
<i class="fa-solid fa-paw fa-rotate-by" style="--fa-rotate-angle: 110deg;"></i>
</div>
/* CSS */
.paws i:nth-child(even) {
    padding-left: 2.0em;
    padding-bottom: 0.5em;
}

アニメーション

Font Awesome 6 になって、アニメーションの種類が増えました (^^♪

<p><i class="fa-solid fa-heart fa-3x fa-beat"></i></p>

<p><i class="fa-solid fa-circle-exclamation fa-3x fa-fade"></i></p>

<p><i class="fa-solid fa-football fa-3x fa-bounce"></i></p>

<p><i class="fa-solid fa-arrow-right-arrow-left fa-3x fa-flip"></i></p>

<p><i class="fa-regular fa-bell fa-3x fa-shake"></i></p>

<p><i class="fa-solid fa-compact-disc fa-3x fa-spin"></i></p>

アニメーションの詳細な動作を指定することもできる。詳しくは https://fontawesome.com/docs/web/style/animate を参照。

関連記事

VK ボタンでアイコンとインライン文字のサイズ変更ができるようになった

VK Blocks 1.40.* にアップデートすると、VK ボタン ブロックのアイコンとインライン文字のサイズ変更ができるようになります。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

Lighting テーマ使用

WordPress サイト開設

スターターパック

  • デザイン済みパーツを組み合わせることで価格納期を大幅削減
  • プロが作ったクオリティが高いホームページ
  • サポート付き・ご自分でかんたんに情報発信できます