クラスを追加するだけでアイコンフォントにアニメーションをつけることができる「Font Awesome Animation」

クラスを追加するだけでアイコンフォントにアニメーションをつけることができる「Font Awesome Animation」

クラスを追加するだけでアイコンフォントにアニメーションをつけることができる「Font Awesome Animation」

Font Awesome Animationは、アイコンフォントであるFont Awesomeにアニメーションをつけることができるスタイルシートです。

スタイルシートをロードして、アイコンにクラスを追加するだけで、アニメーションをつけることができます。

そんなFont Awesome Animationの利用方法について紹介したいと思います。

ステップ1. Font Awesomeの導入

Font Awesome Animationを利用するには、Font Awesomeを導入していることが前提条件となります。Font Awesomeの導入手順については、こちらの記事をご参照ください。

導入手順は非常に簡単で、HTMLとCSSの基礎が理解できていればサクッと利用できます。

ステップ2. Font Awesome Animationのダウンロードと設置

Font Awesome AnimationからCSSファイルをダウンロードします。「Minified CSS」か「Un-minified CSS」を右クリックして、[名前を付けてリンク先を保存]します。

Font Awesome Animationのダウンロード

Minified CSSは、余分な改行や空白が削除され、Minify化されたCSSファイルです。特に理由がない場合は、Minified CSSをダウンロードしましょう。

また、ファイルはGitHubでも公開されています。

CSSファイルをダウンロードしたら、サーバーにfont-awesome-animation.min.cssもしくはfont-awesome-animation.cssを設置します。

ステップ3. Font Awesome Animationのロード

続いて、サーバーに設置したFont Awesome Animationをロードします。HTMLのhead内に以下のコードを追加しましょう。

<link rel="stylesheet" href="css/font-awesome-animation.min.css">

Un-minifiedの場合は、以下のようになります。

<link rel="stylesheet" href="css/font-awesome-animation.css">

ファイルパスは適宜変更してください。これでFont Awesome Animationのスタイルがロードされます。

ステップ4. クラスの追加

最後に、アイコンフォントを表示している<i>要素にクラスを追加します。アニメーションの種類は、Font Awesome Animationの下の方で紹介されています。

アニメーションの種類

「On DOM load」のクラスはページがロードされたら動きだし、「On hover」のクラスはマウスホバー時に動き出します。

例えば、フォルダアイコンにfaa-wrenchのアニメーションをつけたい場合は、以下のように記述します。

<i class="icon-folder-close faa-wrench animated"></i>

このように記述することで、フォルダアイコンがゆらゆらと動くようになります。

あとがき

CSSファイルをロードしてしまえば、あとはクラスを追加するだけでアニメーションをつけられるので楽チンですね。

様々なアニメーションが用意されているので、サイトの雰囲気に合わせて色々と試してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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