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 を参照。

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

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

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

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

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

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

今よりもっといい WordPress サイトにしたいなら G3 Pro Unit がおすすめ

Lightning G3 Pro Pack
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの作成担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。
Font Awesome 6 のアニメーションを VK 見出しで使ってみる
カテゴリー
VK Blocksその他

Font Awesome 6 に追加されたアニメーションを VK 見出し で使ってみました。