FontAwesome の使い方まとめ、便利なWebアイコンフォント

なおこのこだわり

みなさんこんにちは、睡魔に襲われているなおこです。
今回は、ウェブサイトやブログなどを構築または制作する際に便利なFontAwesomeというアイコン素材の使い方をご紹介したいと思います。

スポンサーリンク

FontAwesomeとは

といってもFontAwesomeを何かを知らない場合があるかもしれませんので補足というか軽く解説をしておきます。
FontAwesomeはアイコンをかんたんに取得し文字のようにアイコンを表示できるサービスでCDNのlinkタグを1行headに貼り付ければ1600ぐらいのアイコンが無料でつかえます。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

FontAwesome Pro

FontAwesomeのサブスクリプションで昔は60ドル(6000円ぐらい)で買えましたが、今(2021/10/22)は1年あたり99ドルするみたいです。

Proになると7800個ぐらいのアイコンが使えたり公式のサポートが受けられるようになります。
このサブスクリプションをやめてもサポートや最新のアイコンが追加された際に使用できないなどありますが、サブスクリプションを購入したときに使えたアイコンは永久的に使えるみたいです。ある意味買い切りに近いのかもしれないですね。そのうち詳しくブログにするかもです。


https://fontawesome.com/pro

使い方

<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

引用 https://fontawesome.com/v5.15/icons?m=free

使用したいアイコンのページでHTMLタグをコピーするボタンからコピーし、

引用 https://fontawesome.com/v5.15/icons?m=free


アイコンを表示したいところで、タグコピーしたタグをペーストすると表示されるようになります。

    <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(90度に角度を変える)
  • fa-rotate-180(180度に角度を変える)
  • fa-rotate-270(270度に角度を変える)
  • fa-flip-horizontal(水平方向に反転 )
  • fa-flip-vertical(垂直方向に反転 )
  • fa-spin(なめらかに回転するアニメーション)
  • fa-pulse(カクカク回転するアニメーション)

    <i class="fa fa-truck-monster fa-rotare-90"></i>
    <!-- fa-rotate-90(90度に角度を変える) -->
    
    <i class="fa fa-truck-monster fa-rotare-180"></i>
    <!-- fa-rotate-180(180度に角度を変える) -->
    
    <i class="fa fa-truck-monster fa-rotare-270"></i>
    <!-- fa-rotate-270(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について解説してきましたが、ぶっちゃけ使うかって言うと最近は使ってないですね。軽さを求めたりすると手動で用意して配置したほうが良かったりする。

複数人で作業するときには直感的に行えたり、別なプロジェクトで触っているケースもあり共通の認識で作業できるため意外とありかもしれません。

コメント

タイトルとURLをコピーしました