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 を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。
ご相談・お問い合わせはお気軽にどうぞ
カテゴリー
その他
タグ
前の記事

VK Post Author Display の投稿者プロフィールの画像のスタイル調整

2022年4月11日
カテゴリー
カスタマイズその他
タグ
CSSVK Post Author Display
この記事を読む
次の記事

Font Awesome 6 のアニメーションを VK 見出し・VK ボタン で使ってみる

2022年4月16日
カテゴリー
VK Blocksその他
タグ
Font AwesomeFont Awesome 6VK ボタンVK 見出し
この記事を読む