FontAwesomeアイコンの使用方法

今回は、無料で使える「FontAwesome」という便利なWebサービスを紹介します。

FontAwesomeはweb上で使用されるフォントをWebフォントとして利用することができるサービスです。

有料プランでは、無料プランより多くのアイコンが使えたり、アイコンの種類にlightが増えますが、
無料でも十分な量のフォントを利用することができます。

それでは早速使い方の説明をしていきます。

FontAwesomeの使い方

まず、以下のリンクをコピーして、htmlのhead内にペーストします。

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

 

次に、FontAwesomeのアイコン一覧から、使用したいアイコンのコードをコピーして、HTMLの表示させたい場所にペーストします。
https://fontawesome.com/icons?d=gallery

<p>
  <i class="fas fa-basketball-ball"></i>バスケットボールです。
</p>

 

DEMO

 

大きさは、fa-1x等fa-の後に大きさの単位をつけるクラスを加えることで変更することができます。単位はxs、sm、lg～10xまであります。
注意しておきたいのが、<i>タグの中に文字を入れてしまうと、文字もリサイズされてしまうので気をつけましょう。

<p>
  <i class="fas fa-basketball-ball fa-3x"></i>3xの大きさです。
</p>

 

DEMO

 

また、htmlで独自のクラスを追加してcssのfont-sizeやcolorを使えば自分好みの大きさや色に変更することも可能です。

<p>
  <i class="fas fa-basketball-ball basketball"></i>バスケットボールです。
</p>

.basketball{
 color: orange;
 font-size: 50px;
}

 

DEMO

クラスの中でfa-spinを追加するとアイコンを回転させることができます。

<p>
  <i class="fas fa-basketball-ball basketball fa-spin"></i>回転です。
</p>

 

DEMO

アイコンには４種類あり、class名でアイコンの種類を変更することができます。
どのアイコンにどの種類を適用できるかはアイコン一覧のページで見ることができます。
尚、lightは有料プランのみとなっています。

• fas : Solid(塗りつぶし)
• far : Regular(標準の線と太さ)
• fal : Light(細い)
• fab : Brands(ブランド)

アイコンを画像として扱いたい場合

PhotoshopやIllustratorでアイコンを表示させたい場合は、FontAwesomeのページでフォントをダウンロードし、そのフォルダからuse-on-desktopのフォルダを開き、3つのフォントファイルを
[コントロールパネル]→[デスクトップのカスタマイズ]→[フォント]へ移動させます。

そうしたら、FontAwesomeのチートシートから使いたいアイコンをコピーします。
https://fontawesome.com/cheatsheet

最後に、PhotoshopやIllustratorに貼り付けて、文字パネルでフォントを先ほどインストールした「Font Awesome 5 ~」に変更すれば自由に編集することができます。

FontAwesomeを使うことによって、過去に紹介したWebサービスのfavicon generator all platformsで楽にファビコンを作成することもできるので非常に便利です。