トップ > スマホでアメブロカスタマイズ > Font Awesome AnimationでWebフォントに動きをつける

Font Awesome AnimationでWebフォントに動きをつける

スマホでアメブロカスタマイズ



世界で一番使われているWebフォント、「Font Awesome」。

先日からあれこれ書いてきましたが、一旦最終回。


「Font Awesome Animation」というのを使うと、こんな複雑な動きをつけることができます。

ただ、スマホだと動きません。IEもバージョンにより動かなかったり…。

でも、楽しいでしょ？ブログの表情が豊かになります。



楽しいからといって、使いすぎには注意が必要ですけどね！




  faa-wrench animated　　　  faa-ring animated　　　  faa-horizontal animated



  faa-vertical animated　　　  faa-bounce animated　　　  faa-flash 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



色を変えたり、速度を変えたりもできます。動きっぱなし（↑の例）にもできますし、マウスが乗っかった時に動き出すようにもできます。使い方は今のところ、CSSの変更が必要みたいです。「Font Awesome」の様に、コードをコピペで簡単にってことにはできないみたいです。




参考にしました


これまでのまとめです。この投稿を含め、全部で7回…。第6回の貼付け用コードと、簡単な使い方さえ分かれば、「Font Awesome」を使うの自体はタグ打ちに慣れている方にとってはそれほど難しくないと思います。使ってみたいけど…。な方は、質問待ってます！。




第1回



第2回



第3回



第4回



第5回



第6回



PCでブログをご覧の方は、実際の作例をサイドバーの一番上と右側「Menu」の一番下に設置してます。それぞれ、マウスを乗せると動きますので試してみて下さいね。

Use tha icon with unicode.


Amazon

使い方、導入に関する質問、お待ちしてます。
お気軽にどーぞ！