デザイン

【Font Awesome】アイコンフォントに動きをつける方法

【Font Awesome】アイコンフォントに動きをつける方法

これまで、以下2つの記事でアイコンフォント「Font Awesome」をご紹介しました。

超便利!絵文字みたいなアイコンフォント「Font Awesome」の使い方

【Font Awesome】アイコンフォントの色・大きさを変える方法

今回は第3弾。アイコンフォントにアニメーションをつける方法をお伝えします。

アイコンフォントはアニメーションで動きをつけられる

Font Awesomeのアイコンはアニメーションで動かすことができるんです。

こんな感じ。

アニメーションには種類があるので、アイコンに合った動きをつけるのがいいですね。

多すぎると目障りですが、1記事に1~2箇所くらいなら目立たせるのにもってこい。

では、動きをつける方法を見ていきましょう。

アニメーションの事前準備

「Font Awesome Animation」という専用のスタイルシートを読み込みます。

自分のブログのheadタグ内に、以下コードを貼り付けて保存してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css" type="text/css" media="all" />

WPテーマ「JIN」の場合、HTMLタグ設定の【head内】に貼り付けて、「変更と保存」ボタンを押します。

他テーマの場合、テーマエディターから「header.php」を開き、headタグ内に貼り付けます。

テーマエディター「header.php」編集ページ

最後に「ファイルを更新」をクリックします。

貼り付ける場所の詳細は、サポートサイトやマニュアルをご確認ください。

アニメーションをつける方法

まずは、常に動いてるアニメーションをつけてみます。

アニメーションコード使用例

<i class="fas fa-phone faa-wrench animated"></i>

「faa-wrench animated」という部分がclass名です。

通常のアイコンコードにclass名を追加するだけで、アニメーションがつけられます。

アニメーション適用後

(常に動くアニメーション)

レンチって名前のアニメーションなので、ひねるような動きですね。

どんなアイコンでも同じ動きを表現することができます。

アニメーション一覧

Font Awesome Animationで設定できるアニメーションの種類をまとめました。

アニメーション class名 コード
ひねる faa-wrench animated <i class="fas fa-wrench faa-wrench animated"></i>
ブルブル faa-ring animated <i class="fas fa-bell faa-ring animated"></i>
横揺れ faa-horizontal animated <i class="fas fa-envelope faa-horizontal animated"></i>
縦揺れ faa-vertical animated <i class="far fa-thumbs-up faa-vertical animated"></i>
チカチカ faa-flash animated <i class="far fa-lightbulb faa-flash animated"></i>
弾む faa-bounce animated <i class="fas fa-frog faa-bounce animated"></i>
回る faa-spin animated <i class="fas fa-spinner faa-spin animated"></i>
浮く faa-float animated <i class="fas fa-rocket faa-float animated"></i>
ドキドキ faa-pulse animated <i class="fas fa-heart faa-pulse animated"></i>
シェイク faa-shake animated <i class="fas fa-wifi faa-shake animated"></i>
ジャーン faa-tada animated <i class="fas fa-trophy faa-tada animated"></i>
通過する faa-passing animated <i class="fas fa-space-shuttle faa-passing animated"></i>
戻る faa-passing-reverse animated <i class="fas fa-car-side faa-passing-reverse animated"></i>
バースト faa-burst animated <i class="fas fa-bomb faa-burst animated"></i>
落ちる faa-falling animated <i class="far fa-star faa-falling animated"></i>

class名を変えればアニメーションも変えられますよ。

Font Awesome Animation

アイコンにカーソルをのせたときだけ動かす方法

アニメーションは常にアイコンを動かすだけじゃなく、カーソルをのせたときだけアイコンを動かすこともできるんです。

アニメーションコード使用例

<i class="fas fa-bell faa-ring animated-hover"></i>

class名にある「animated」を「animated-hover」に変更するだけ。

アニメーション適用後

(アイコンにカーソルをのせてね)

アイコンまたは文字にマウスをのせたときだけ動かす方法

親要素にカーソルをのせたときのみ、つまり「アイコンと文字のどちらにカーソルをのせてける」って設定も可能なんです。

手順

  1. 親要素に「faa-parent animated-hover」というclass名を追加します。
  2. アイコンに「faa-◯◯」というclass名だけ追加します(「animated」はつけない)。

HTML

<span class="faa-parent animated-hover"><i class="far fa-hand-paper faa-wrench fa-lg"></i> 文字の上にカーソルをのせてね</span>

HTMLは階層構造になってます。上の階層が「親」要素、下の階層が「子」要素という親子関係。

上記HTMLの場合、「span」が親要素で「i」が子要素です。「span」に「faa-parent animated-hover」というclassを設定し、「i」に「faa-◯◯」を追加します。

アニメーション適用後

文字の上にカーソルをのせてね

リンクにカーソルをのせたときだけ動かす方法

@azusascom

こんな感じに、リンクにカーソルをのせたときのみ動く設定もできるんです。

HTML

<a class="faa-parent animated-hover" href="https://azusas.com/profile/"><i class="fas fa-angle-double-right faa-flash"></i>アズサのプロフィール</a>

「アイコンまたは文字にマウスをのせたときだけ動かす方法」と同じように、親要素である「a」に「faa-parent animated-hover」というclassを追加し、「i」に「faa-◯◯」を追加します。

アニメーション適用後

アズサのプロフィール(リンクにカーソルをのせてね)

何気なくカーソルをのせたときにアイコンが動くと、注目しちゃいますね。

ピンポイントでアニメーションを使おう

今回は、アイコンフォントに動きをつける方法についてお伝えしました。

  • 事前準備とコード追加でアイコンを動かすことができる。
  • アニメーションは15種類ある。
  • カーソルをのせたときだけアイコンを動かすこともできる。

アイコンのアニメーションは、前回紹介した大きさや色の変更と組み合わせることも可能です。

ここぞ!というときに使ってみてくださいね。

ではでは。

ただ書くだけじゃブログ稼げない
ビジネスの勉強をしますか?

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です