cssライブラリでwebサイトにアイコンを埋め込む方法/font-awesomeの使い方

icons IT

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"> ...

ローカル環境で使うこともその気になればできるようですが、とりあえずここではネットに接続しているものとします。

アイコンを選ぶ

icon1
サイトではフリーで1500以上、年間99ドルの有料プランで5000以上のアイコンを使うことができます。とりあえずフリーだと思いますので、色が濃いアイコンをチョイスします。グレイのアイコンはPRO契約すると使えるようになります。


icon2
アイコンをクリックすると、こんな感じの画面になります。


icon3
i class = となっている部分をクリックないしはドラッグして、コードをコピーします。


アイコンを貼る

コピーしたコードを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タグで閉じることでアイコン以外をアニメーションさせることも可能です。ご参考まで。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント