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 ボタン ブロックのアイコンとインライン文字のサイズ変更ができるようになります。
Lightning G3 / VK Blocks のカスタマイズ、TIPS 
投稿者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
最新の投稿
今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。
名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。
Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。
名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。
Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています（個々の単体販売はされていません）。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。
