クラスを追加するだけでアイコンフォントにアニメーションをつけることができる「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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。