みなさんこんにちは、睡魔に襲われているなおこです。
今回は、ウェブサイトやブログなどを構築または制作する際に便利なFontAwesomeというアイコン素材の使い方をご紹介したいと思います。
FontAwesomeとは
といってもFontAwesomeを何かを知らない場合があるかもしれませんので補足というか軽く解説をしておきます。
FontAwesomeはアイコンをかんたんに取得し文字のようにアイコンを表示できるサービスでCDNのlinkタグを１行headに貼り付ければ1600ぐらいのアイコンが無料でつかえます。
FontAwesome Pro
FontAwesomeのサブスクリプションで昔は60ドル（6000円ぐらい）で買えましたが、今（2021/10/22）は1年あたり99ドルするみたいです。
Proになると7800個ぐらいのアイコンが使えたり公式のサポートが受けられるようになります。
このサブスクリプションをやめてもサポートや最新のアイコンが追加された際に使用できないなどありますが、サブスクリプションを購入したときに使えたアイコンは永久的に使えるみたいです。ある意味買い切りに近いのかもしれないですね。そのうち詳しくブログにするかもです。
使い方
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">上記のlinkタグをheadタグの中に追記することで、使えるようになります。
次にアイコンを下記のページで探します。
https://fontawesome.com/v5.15/icons?m=free
使用したいアイコンのページでHTMLタグをコピーするボタンからコピーし、
アイコンを表示したいところで、タグコピーしたタグをペーストすると表示されるようになります。
<i class="fa fa-accessible-icon"></i>ちなみにfa fa-accessible-iconのところでアイコンを指定しているためその部分を変えることで自由に変更できます。
サイズの変更
クラスを付与することで気軽にサイズ変更ができたりします。内部的にはフォントサイズが付与される形みたいです。
- fa-xs(0.75倍)
- fa-sm(0.875倍)
- 何もつけない
- fa-lg (1.3倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
<i class="fa fa-truck-monster fa-xs"></i> <!-- 0.75 -->
<i class="fa fa-truck-monster fa-sm"></i> <!-- 0.875 -->
<i class="fa fa-truck-monster"></i> <!-- 何もつけない -->
<i class="fa fa-truck-monster fa-lg"></i> <!-- 1.3 -->
<i class="fa fa-truck-monster fa-2x"></i> <!-- 2 -->
<i class="fa fa-truck-monster fa-3x"></i> <!-- 3 -->
<i class="fa fa-truck-monster fa-4x"></i> <!-- 4 -->
<i class="fa fa-truck-monster fa-5x"></i> <!-- 5 -->アイコンの回転や反転させる
クラスの付与をすることで角度を変えたり、反転することができます。
- fa-rotate-90（９０度に角度を変える）
- fa-rotate-180（１８０度に角度を変える）
- fa-rotate-270（２７０度に角度を変える）
- fa-flip-horizontal（水平方向に反転 ）
- fa-flip-vertical（垂直方向に反転 ）
- fa-spin（なめらかに回転するアニメーション）
- fa-pulse（カクカク回転するアニメーション）
<i class="fa fa-truck-monster fa-rotare-90"></i>
<!-- fa-rotate-90（９０度に角度を変える） -->
<i class="fa fa-truck-monster fa-rotare-180"></i>
<!-- fa-rotate-180（１８０度に角度を変える） -->
<i class="fa fa-truck-monster fa-rotare-270"></i>
<!-- fa-rotate-270（２７０度に角度を変える） -->
<i class="fa fa-truck-monster fa-flip-horizontal"></i>
<!-- fa-flip-horizontal（水平方向に反転 ） -->
<i class="fa fa-truck-monster fa-flip-vertical"></i>
<!-- fa-flip-vertical（垂直方向に反転 ） -->
<i class="fa fa-truck-monster fa-spin"></i>
<!-- fa-spin（なめらかに回転するアニメーション） -->
<i class="fa fa-truck-monster fa-pulse"></i>
<!-- fa-pulse（カクカク回転するアニメーション） -->色の変更
色の変更はCSSでcolor:blue;などで変更する必要があります。
style属性で行ってもいいですしクラスを付与してクラスに対してstyleを書いても良いと思います。
<!-- head部分 -->
<style>
.blue{
color: blue;
}
</style>
<!-- body部分 -->
<i class="fa fa-truck-monster blue"></i>
<i class="fa fa-truck-monster" style="color: blue;"></i>
アイコン同士を重ねる
専用のクラスが用意されてるためかんたんに実装することができます。
fa-stackというクラスをつけたspanタグの中にfa-stack-2xクラスをつけた背景にしたいアイコンを設置しfa-stack-1xクラスをつけた真ん中に表示したいアイコンを配置するとできます。
<span class="fa-stack">
<i class="fa fa-cloud fa-stack-2x"></i>
<i class="fa fa-heart fa-stack-1x" style="color: white;"></i>
</span>一部のブランド系アイコン
一部のブランド系アイコンを使うときはクラスを変更する必要があります。例えばTwitterアイコンとかです。ブランドアイコンはfaではなくfabにするような形です。
<i class="fab fa-twitter"></i>最後に
ここまでFontAwesomeについて解説してきましたが、ぶっちゃけ使うかって言うと最近は使ってないですね。軽さを求めたりすると手動で用意して配置したほうが良かったりする。
複数人で作業するときには直感的に行えたり、別なプロジェクトで触っているケースもあり共通の認識で作業できるため意外とありかもしれません。
The post FontAwesome の使い方まとめ、便利なWebアイコンフォント first appeared on FascodeNetwork Blog.