１. ステップ３～基本編その２
当サイトSOBOKONAでは動きのあるアイコン・アニメーションアイコンを多く取り上げていきます。ステップ３は引き続き Font Awesomeアイコンの基本的な使い方について解説しますが、後半で動きのあるアイコン、アニメーション用クラスの使い方も取り上げます。
２．Font Awesome のスタイリング基本クラスその２
2-1. リストでアイコンを使う
<ul>タグに fa-ul クラスを追加し、<li>~</li>タグ内に <span>タグを入れ子して、その中に fa-li クラスを追加します。やや複雑ですが決まりきった型なので、型通りに真似をすればよいです。元々あるリストマーカーを消去した上で、代わりに Font Awesome アイコンを配置し表示しています。
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-lg fas fa-dog"></i></span> わんこ</li>
<li><span class="fa-li"><i class="fa-lg fas fa-cat"></i></span> にゃんこ</li>
<li><span class="fa-li"><i class="fa-lg fas fa-ghost"></i></span> おばけ</li>
<li><span class="fa-li"><i class="fa-lg fas fa-child"></i></span> ばんざーい</li>
</ul>
- わんこ
- にゃんこ
- おばけ
- ばんざーい
2-2. アイコンを重ねて表示する
２つのアイコンを重ねるには、まず親のHTML要素に fa-stack クラスを追加します。次に、大きいアイコンに fa-stack-2x クラスを追加し、通常サイズのアイコンに fa-stack-1x クラスを追加します。 fa-stack-1x クラスの方に fa-inverse クラスを追加すると色の反転（ノックアウト効果）をすることができます。
<span class="fa-stack fa-2x">
<i class="fa-stack-2x fas fa-square"></i>
<i class="fa-stack-1x fa-inverse fas fa-star"></i>
</span>
2-3. アイコンを回転させるアニメーション
Font Awesome アイコンにはアニメーション効果を加えることもできます。fa-spin クラスを追加するとアイコンをクルクルと回転させることができます。fa-pulse クラスを追加すると8ステップでカクカクと回転させることができます。
<div class="fa-3x">
<i class=" fa-spin fas fa-fan"></i>
<i class=" fa-spin fas fa-compass"></i>
<i class=" fa-spin fas fa-car-crash"></i>
<i class=" fa-pulse fas fa-sync"></i>
<i class=" fa-pulse fas fa-spinner"></i>
</div>
３．Font Awesome Animation を利用する
Font Awesome Animation には、fa-spin クラスや fa-step クラスのようなアイコンに様々なアニメーション効果を付け加えるクラスがたくさん用意されています。Font Awesome Animation を使うには、CDNを利用する方法とダウンロードして利用する方法の2通りがあります。
3-1. CDNを利用する方法
CDNを利用する場合は、「cdnjs：font-awesome-animation」にアクセスします。リンクのコードをコピーして、以下のように、<head>～</head>に書き込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.min.css">
3-2. ダウンロードして利用する方法
「Font Awesome Animation — Getting started」にアクセスします。ファイルをダウンロードして、適当な場所に配置します。以下のように、<head>～</head>に書き込みます。
<link rel="stylesheet" href="/your-path-to-fontawesome/font-awesome-animation.min.css">
3-3. Font Awesome Animation の使い方
使い方は、fa-spin クラスや fa-step クラスとほぼ同じですが、アニメーションクラスと共に、animated クラスも追加します。次の例は faa-wrench クラスと animated クラスと animated クラスを追加した例です。3-7. にアニメーションクラスの一覧をのせています。参考にしてください。
<div class="fa-2x">
<i class="faa-wrench animated fas fa-wrench"></i>
</div>
3-4. アニメーション速度を調整する
アニメーションの再生速度を２倍にする faa-fast クラスと、半分にする faa-slow クラスを追加することができます。
<div class="fa-2x">
<i class="faa-wrench animated faa-fast fas fa-wrench"></i>
<i class="faa-wrench animated faa-slow fas fa-wrench"></i>
</div>
3-5. アイコンへマウスオーバーした時にのみ動かす
animated クラスを animated-hover クラスに変更すると、アイコンにマウスをのせたときにのみアニメーションを有効にすることができます。
<div class="fa-2x">
<i class="faa-wrench animated-hover fas fa-wrench"></i>
</div>
アイコンにマウスをのせると動きます
3-6. 親要素へマウスオーバーした時に動かす
アイコンまたは親要素にマウスをのせた時にアニメーションを有効にすることができます。親要素に faa-parent クラスと animated-hover クラスを追加し、アイコンには faa-wrench クラスを追加します。
<div class="faa-parent animated-hover">
<i class="faa-wrench fa-2x fas fa-wrench"></i>
</div>
アイコンまたはココの黄色い部分にマウスをのせると動きます
3-7. アニメーションクラスの一覧
アニメーションクラスには基本的な動きをする16種類のクラスが用意されています。
| アニメ | コード |
|---|---|
| <i class="fas fa-music faa-wrench animated"></i> | |
| <i class="far fa-bell faa-ring animated"></i> | |
| <i class="far fa-hand-paper faa-horizontal animated"></i> | |
| <i class="fab fa-github-alt faa-vertical animated"></i> | |
| <i class="fas fa-splotch faa-flash animated"></i> | |
| <i class="far fa-handshake faa-bounce animated"></i> | |
| <i class="far fa-tired faa-spin animated"></i> | |
| <i class="fas fa-child faa-float animated"></i> | |
| <i class="far fa-heart faa-pulse animated"></i> | |
| <i class="fas fa-cat faa-shake animated"></i> | |
| <i class="fab fa-angellist faa-tada animated"></i> | |
| <i class="fas fa-dragon faa-passing animated"></i> | |
| <i class="fas fa-swimmer faa-passing-reverse animated"></i> | |
| <i class="fas fa-bomb faa-burst animated"></i> | |
| <i class="fas fa-snowboarding faa-falling animated"></i> | |
| <i class="fas fa-parachute-box faa-rising animated"></i> |
| アニメーション | クラス名 |
|---|---|
| faa-wrench | |
| faa-ring | |
| faa-horizontal | |
| faa-vertical | |
| faa-flash | |
| faa-bounce | |
| faa-spin | |
| faa-float | |
| faa-pulse | |
| faa-shake | |
| faa-tada | |
| faa-passing | |
| faa-passing-reverse | |
| faa-burst | |
| faa-falling | |
| faa-rising |
コメント