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

2022年4月16日(土)2022年7月29日(金) 対馬俊彦

対馬俊彦

参考にしたページ 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 ボタンブロックのアイコンとインライン文字のサイズ変更ができるようになります。

Lightning G3 / VK Blocks のカスタマイズ、TIPS

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

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

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

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

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

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく