Font Awesome Animationの使い方

Tips Web

fontawesomeの便利なアニメーションを使ってみました。

超簡単で色んなアニメーションをアイコンに付けれるので是非使ってみてください。

では参ります〜

スポンサードリンク

Font Awesome Animationの準備

すぐ終わりますww

僕は開発用ではなく圧縮版のcss(Minified CSS)を使いました。

まずここからMinified CSSを入手。
Font Awesome Animation

これをコピってCSSファイルを作る。
今回はfont-awesome-animation.cssという名前にしました。

次にhtmlに以下を追加します。
*CSSファイルの場所を間違えないように注意


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

以上で準備完了です。

Font Awesome Animationの使い方

先ほどのリンクにもありますがSNSボタンを例を挙げて説明します。

こんな感じでFont AwesomeでSNSアイコンを準備します。


<div class="sns">
	<a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
	<a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
	<a href=""><i class="fa fa-get-pocket" aria-hidden="true"></i></a>
</div>

これに先ほどのリンクの”Usage”にあるアニメーションを追加します。


<div class="sns">
	<a href=""><i class="fa fa-twitter-square faa-tada animated-hover" aria-hidden="true"></i></a>
	<a href=""><i class="fa fa-facebook-square faa-tada animated-hover" aria-hidden="true"></i></a>
	<a href=""><i class="fa fa-get-pocket faa-tada animated-hover" aria-hidden="true"></i></a>
</div>

こんな感じで簡単にアニメーションが使えます。
animated-hoverでホバーした時にアニメーションが発動するようにもできます。
以上です。

色んなアニメーションがあるので試してみてください。

簡単ですが、以上ですww

では〜

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。