Font Awesomeのアイコンを動かしていこう！
ブログやサイトだと、マウスホバーで動きのあるタイプが使いやすいかなと思います。（指またはマウスホバーしてみてください↓）
Font Awesomeは、アニメーションのように動かすクラスコードを提供してくれています！
- 常に揺れてる
- 注目・目を惹かせたい（SNSアイコン等）
- 注意を引く・注意喚起に
- ホバー時（マウスを当てると）動く
と、使い方によっては読者への注目効果も高いので、ぜひ活用してみてください。
Font Awesomeの旧バージョン5、新バージョン6で使用可能です！
Font Awesomeの基本的な使い方
- 基本的な使い方
- そもそもFont Awesomeがうまく反映されない人
- 新バージョン6で使用する場合は無料登録が必要
はこちらから確認してください。
- 文字の大きさを変える
- 色を変える
方法はこちらに！
Font Awesomeのアニメーションの使い方
紹介するコード（クラス名）は全て基本的に同じ挿入場所になります！5，6で微妙にコードが異なりますが挿入するクラス名の位置は同じでＯＫです！
Font Awesomeからコードをコピーする
新：<i class="fa-brands fa-twitter"></i>
旧：<i class="fab fa-twitter"></i>アニメーションのクラス名を追加
基本的に挿入場所は変わりません。
新：<i class="fa-brands fa-twitter クラス名を追加"></i>
旧：<i class="fab fa-twitter クラス名を追加"></i>
新：<i class="fa-brands fa-twitter fa-beat"></i>
旧：<i class="fab fa-twitter fa-beat"></i>前回紹介した「カラー」と「サイズ変更」を組み合わせて使用することもできます！
<i class="fa-brands fa-twitter アニメーションクラス名 サイズクラス名 色のクラス名"></i>
Follow me
<i class="fa-brands fa-twitter fa-beat fa-5x home-size"></i>アイコンを傾ける・反転
コード・クラス名一覧
| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| fa-rotate-90 | 90度回転 | |
| fa-rotate-180 | 180度回転 | |
| fa-rotate-270 | 270度回転 | |
| fa-flip-horizontal | 水平方向に反転 | |
| fa-flip-vertical | 垂直方向に反転 | |
| fa-flip-both | 水平かつ垂直方向に反転 | |
| fa-rotate-by | 任意の角度で回転<style>で設定が必要 | |
| 反転<span class>で設定が必要 |
挿入例
<i class="fa-solid fa-snowboarding fa-rotate-90"></i>任意の角度で傾けたい（応用）
『クラス名（fa-rotate-by）』＋『スタイル（style="--fa-rotate-angle: 任意の数字deg;"）』を追加します。
挿入手順①クラス名を追加
<i class="fa-solid fa-snowboarding fa-rotate-by"></i>挿入手順②スタイルを追加
<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>「45deg 」「-45deg 」「80deg 」の数字で傾き加減を設定できます。※「－」を付けると左に傾きます
回転と反転を同時にする（応用）
回転と反転を同時にする場合は、同じ親要素にクラスで命令すると上書きされてしまうため、別々の呼び出しで行います。
挿入手順①クラス名を追加
<i class="fa-solid fa-snowboarding fa-rotate-270"></i>挿入手順②スタイルを追加
<span class="fa-flip-vertical" style="display: inline-block;">
<i class="fa-solid fa-snowboarding fa-rotate-270"></i>
</span>赤色の部分を、先ほどのクラス一覧から持ってきて貼り付ければOKです！
参考 Use Font Awesome on the Web｜Font Awesome
アニメーションで動かす
コード・クラス名一覧
挿入例
<i class="fa-solid fa-snowboarding fa-beat"></i>| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| fa-beat | ビートを刻む | |
| fa-fade | 点滅 | |
| fa-beat-fade | フェードイン・アウト | |
| fa-bounce | 跳ねる | |
| fa-flip | 回転 | |
| fa-shake | シェイク | |
| fa-spin | スピン |
※回転（fa-flip）は、携帯で見るとバグが起こりやすいので注意。
以下詳細設定で、回転の動きが見えるようにしてありますが、携帯で見るとページ全体のバグが起きるため《PCのみ》閲覧可能になってます。
ビートを刻む（fa-beat）
| スタイルクラス | 詳細 |
|---|---|
| --fa-animation-duration: 0.5s; | 最大になるまでの秒数 |
| --fa-beat-scale: 2.0; | 拡大縮小の最大値 |
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>点滅（fa-fade）
| スタイルコード | 詳細 |
|---|---|
| --fa-animation-duration: 2s; | 秒数 |
| --fa-fade-opacity: 0.6; | 不透明度 |
<i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" ></i>フェードイン・フェードアウト（fa-beat-fade）
| スタイルコード | 詳細 |
|---|---|
| --fa-beat-fade-opacity: ; | 不透明度の最小値 |
| --fa-beat-fade-scale: ; | 拡大縮小の最大値 |
<i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" ></i>ジャンプ（fa-bounce）
| スタイルコード | 詳細 | ブラウザ表示 |
|---|---|---|
| --fa-bounce-rebound: 1; | 着地後のリバウンド量 | |
| --fa-bounce-height: 1; | ジャンプの最大高さ | |
| --fa-bounce-start-scale-x: 1; | ジャンプ開始で水平方向の回転 | |
| --fa-bounce-start-scale-y: 1; | ジャンプ開始で垂直方向に回転 | |
| --fa-bounce-jump-scale-x: 1; | ジャンプ上部で水平方向に回転 | |
| --fa-bounce-jump-scale-y: 1; | ジャンプ上部で垂直方向に回転 | |
| --fa-bounce-land-scale-x: 1; | 着陸時で垂直方向に回転 | |
| --fa-bounce-land-scale-y: 1; | 着陸時で垂直方向に回転 |
<i class="fa-solid fa-envelope fa-bounce" style=" --fa-bounce-start-scale-x: 1;"></i>0で無効化、1で有効化になります。
回転（fa-flip）
| スタイルコード | 詳細 | ブラウザ表示 |
|---|---|---|
| --fa-flip-x: 1; | 斜め回転 | |
| --fa-flip-y: 1; | 横回転 | |
| --fa-flip-z: 1; | 斜め回転 | |
| --fa-flip-x: 1; --fa-flip-y: 0; | 縦回転 | |
| --fa-animation-duration: 1; | どのくらいの速度で回転するか（秒数） |
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" ></i>0で無効化、1で有効化になります。
スピン（fa-spin）
| クラス名 | 詳細 | ブラウザ表示 |
|---|---|---|
| fa-spin: 1; | 時計回りに360度回転 | |
| fa-spin-pulse: 1; | 時計回りに360度回転（8段階） | |
| fa-spin-reverse: 1; | 反時計回りに回転 |
<i class="fa-solid fa-bell fa-shake fa-2xl kiiro-color"></i>0で無効化、1で有効化になります。
参考 Animating Icons｜Font Awesome
以下アニメーションは<head>にコード追加必須
以下、アニメーションは<head></head>にコードを挿入すると、アニメーションとして動作するものです。※新旧5，6共に
アニメーションを動作させるために、<head></head>の間に以下コードを挿入してください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />「WordPress」だと「外観」＞「テーマファイルエディター」＞「header.php」
AFFINGERは「AFFINGER管理画面」＞「その他」＞「コードのheadに出力するコード」にペースト
| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| faa-wrench animated | レンチ | |
| faa-ring animated | ベル揺れ | |
| faa-horizontal animated | 横揺れ | |
| faa-vertical animated | 縦揺れ | |
| faa-flash animated | 点滅 | |
| faa-bounce animated | バウンス | |
| faa-spin animated | 回転 | |
| faa-float animated | 浮上 | |
| faa-pulse animated | パルス | |
| faa-shake animated | シェイク | |
| faa-tada animated | 大きくなって揺れる | |
| faa-passing animated | 横移動 | |
| faa-passing-reverse animated | バック | |
| faa-burst animated | バースト |
挿入例
<i class="fab fa-twitter faa-wrench animated"></i>速度を変える
| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| faa-fast | 速く | |
| faa-slow | 遅く |
挿入例
<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
<i class="fa fa-wrench faa-wrench animated faa-slow"></i>アイコンをホバー時に動かす
ホバーで動かす
「animated」の代わりに「animated-hover」を使用します。
<i class="fa-solid fa-apple-whole アニメーションクラス名 animated-hover"></i>挿入例
<i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>ホバーしてアニメーション＆色を変える
ホバーで動かす
先ほどの応用にプラスして、カラー設定をCSSコードに「元のカラー」と「ホバー時のカラー」を追加させて動かします。
【WordPress】「外観」＞「カスタマイズ」＞「追加CSS」または「外観」＞「テーマエディター」＞「子テーマのStyle.css」
//元カラー
.red-color { color: #C62828;}
//ホバー時のカラー
.red-color:hover { color: #00bfff;}アニメーションの入れ方は変わりません。
カラー設定や、Webアイコンの大きさの指定は<span>の親要素に反映さえます。
<span class="red-color fa-2xl">
<i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>
</span>親要素にホバーした際に動かす
pタグ全体に（文字にもマウスを当ててみて）
親要素とは<p>タグ・<a>タグ・<div>タグのような「段落文章全体」「リンク」「ボックス」などで、アイコンだけではなく全体にカーソルが当たった時に、アイコンが動くようにできる設定です。
『親クラス』に『faa-parentとanimated-hover』を挿入します。
挿入例(aのリンクが親要素の場合)
<a href="#" class="faa-parent animated-hover">
<i class="fa-brands fa-twitter faa-wrench"></i>あいうえお
</a>挿入例(pのリンクが親要素の場合)
<p class="faa-parent animated-hover">
<i class="fa-brands fa-twitter faa-wrench"></i>あいうえお
</p>あいうえお
ホバー時に色を変える方法はこちら。
参考・詳細 font-awesome-animation
まとめ
Font Awesomeのアニメーションについて、まとめました！
平面のブログに動きが出ると、目が行きやすいので『注意喚起』や『SNSへのフォロー』などにおすすめです！
