font-awesomeは超メジャーなアイコンサイトで、比較的簡単な手順でサイトにアイコンを埋め込むことができます。これが意外とサイトのイメージをグッと引き上げる効果があるから不思議なものです。アイコンにはアニメーションを付けることも可能です。
font-awesomeの使い方
font-awesomeはアイコンフォントと呼ばれる絵と文字の中間、つまりアイコン＝絵文字、記号を膨大な数公開している海外のサイトです。
このサイトに関しては他に優れた記事がネット上にたくさんあるんですが、うちのサイトでも簡単に説明したいと思います。記事書くと色々と発見もあるので。
公式サイトはこちらで、ここでバージョンも確認することができます。ネットに繋がっていれば、使い方は単純。
font-awesomeの読み込み
まずheadタグの中で、font-awesomeを読み込みます。
<！-- html -->
...
<！-- *は最新のバージョンに書き換え -->
<link href="https://use.fontawesome.com/releases/v*.*.*/css/all.css" rel="stylesheet">
...
ローカル環境で使うこともその気になればできるようですが、とりあえずここではネットに接続しているものとします。
アイコンを選ぶ
アイコンを貼る
コピーしたコードをHTMLにそのまま貼り付けます。
<i class="fab fa-apple"></i>するとこのように、アイコンが貼り付けされました。最初にheaderにコードを埋め込むことさえできれば、あとはほぼコピペです。
font-awesomeを編集する
アイコンは扱いとしては文字です。ですので、文字に対するCSSでのデザイン方法がわかっていれば、font-awesomeのアイコンもデザインすることができます。
たとえば色はそのまんまcolorですし、サイズは固有のクラス指定（fa-lg、fa-2x、fa-3x、fa-4x、fa-5x）以外のサイズもfont-sizeで変更可能です。
text-shadowで 影をつけることもできますし、背景色をつけることも可能です。
色をつける場合、上の例にならえばこのようになります。
<！-- html -->
<i class="fab fa-apple red"></i>
/*CSS*/
.red{
color:red;
}
もしCSSをどこに書いていいかよくわからなければ、htmlに直接書いてもOKです。
<！-- html -->
<i style = "color:red;" class="fab fa-apple red"></i>
文字サイズはfont-awesomeでいくつか用意してくれているクラスがあるので、上の5サイズであれば、クラスを書くだけで適用されます。
<！-- html -->
<i class="fab fa-apple fa-lg"></i>
サイズを数字で指定するのであればこんな感じになります。
<！-- html -->
<i style = "font-size:35px;" class="fab fa-apple red"></i>
その他できること
回転
fa-spinクラスを足すことで、アイコンを回転させることができます。
<i class="fas fa-spinner fa-spin"></i>
さらにできること
アイコン以外にも使いたいようなやたら豊富なアニメーションがfont-awesomeには実装されています。これらを使うためには、最初と同じ要領でheadタグに次のようなコードをさらに追加する必要があります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" />あとはクラス追加するだけですが、イベントの種類として「常時アニメーション」「マウスホバー時アニメーション」がデフォルトで用意されています。それぞれクラスでいうとanimated、animated-hoverになります。
親要素にマウスホバー時にアニメーションさせたい場合には、親要素にanimated-hoverを付けます。これも具体例を見てみましょう。
まずは「常時アニメーション」の場合。
仮にfaa-ringとしていますが、他にもいろんな動きがあります。animatedクラスの場合、ほっといても動き続けます。
<i class="fas fa-bell faa-ring animated"></i>つぎに「マウスホバー時にアニメーション」の場合。
アイコンにカーソルを当てた時のみアニメーションします。
<i class="fas fa-bell faa-ring animated-hover"></i>最後に「親要素にマウスホバー時にアニメーション」の場合。
親要素のspanタグに対してfaa-parentクラスとanimated-hoverクラスを付けることで、上の文章のどこにマウスカーソルを当ててもアニメーションさせることができます。アイコンにはanimated-hoverは記述せず、アニメーションの種類のみクラスを付けます。
<span class = "faa-parent animated-hover">
<i class="fas fa-bell faa-ring"></i>
マウスホバーの対象にしたい文章
</span>ちなみに、iタグで閉じることでアイコン以外をアニメーションさせることも可能です。ご参考まで。
コメント