Font Awesomeの使い方まとめ【様々な使用パターン紹介】

Tool/App

今回は、Font Awesomeの初期設定、基本的な使い方と、CSSクラスを使用した色や大きさの変更方法やアニメーションなどの様々な使用パターンやカスタマイズ方法を紹介します。

Font Awesomeとは?

Font Awesomeとは、CDNを利用してCSSとLESSに基づくフォントとアイコンをWebサイト内に簡単に導入することができるツールキットです。

無料プランと有料プランとがあるが、無料プランでも1000種類以上のアイコンが用意されていて、編集もすることが出来るため、これ1つで様々な種類のアイコンを使うことができます。

下記のリンクはFont AwesomeのTOPのリンクです。

https://fontawesome.com

Font Awesomeを使用する準備

Font Awesomeを使用するには、自身のサイトにFont Awesomeのデータを読み込む記述をしなくてはいけません。CDNと言われる専用サーバーからCSSを読み込みます。

まずは下記のリンクを自身のサイトの<head>〜</head>の間に貼り付けます。

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

もしくはFont AwesomeのTOPページの「Start for Free 」のボタンから無料新規登録を行い、そこからコードを取得します。(その場合はJavaScriptからの読み込みが可能。また有料プランにグレードアップが出来ます。)

Font Awesomeの基本的な使い方

Font Awesomeの基本的な使い方は、まずはTOPページの左上にある「Search icons…」の検索窓からアイコンを探します。(英語のみ)

目当てのアイコンを見つけたらそのページを開きます。すると下記のようなアイコン編集画面が出てきます。

アイコンページの左上にある、下記写真の部分のコードをコピーします。

そのコードをそのまま自身のサイトに貼り付けます。

<i class="fas fa-star"></i>

すると下記のようにアイコンが表示されます。

Font Awesomeの色々なカスタム

Font Awesomeでは、クラス名に決まったクラスを指定するだけで大きさの変更、回転など様々なカスタマイズを簡単に行うことが出来るようになっています。またアイコンフォントなのでテキスト同様にCSSのプロパティが使えるのでカラーや幅なども簡単に編集できます。

それらのカスタマイズ方法をいくつか紹介していきます。

大きさの変更

大きさの変更はクラス名「fa-○○」をつけることで可能です。「fa-2x」以降は2倍、3倍、4倍….と倍になっていき最大10倍まで可能です。

<i class="fas fa-desktop fa-3x">
クラス名 実際のサイズ 実際の見た目
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em

カラーの変更

カラーの変更はシンプルにCSSでcolorプロパティを付けてあげます。

<i class="fas fa-apple-alt fa-5x" style="color:#7cfc00;"></i>

幅の統一

アイコンの幅はアイコンによって多少異なります。下記のアイコンは幅の指定なしで表示させているアイコンです。見て分かる通り犬と馬の幅が広いです。

幅の変更はクラス名「fa-fw」を付けることで幅を統一してくれます。

<div><i class="fas fa-cat fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-dog fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-horse fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>
<div><i class="fas fa-dove fa-fw fa-2x" style="background:rgba(255, 127, 80, .5);padding: 2px 2px;"></I></div>

リストで使う

アイコンをリストマーカーに変更したい場合、ulタグに「fa-ul」のクラス名を付けて、liタグに「fa-li」のクラスを付けることで可能です。

  • リスト1
  • リスト2
  • リスト3
  • リスト4

<ul class="fa-ul">
  <li><i class="fa fa-check fa-li"></I>リスト1</li>
  <li><i class="fa fa-check fa-li"></I>リスト2</li>
  <li><i class="fa fa-check fa-li"></I>リスト3</li>
  <li><i class="fa fa-check fa-li"></I>リスト4</li>
</ul>

枠線を付ける

アイコンに枠線を付けたい場合は「fa-border」で可能です。

<i class="fa fa-quote-left fa-2x fa-border"></I>

float表示(回り込み)

fa-pull-left」or「fa-pull-right」を付けることアイコンのfloat表示(回り込み)が可能です。

「fa-pull-left」と「fa-pull-right」は引用文などに使える。このように左上と右上に任意のアイコンを表示できます。

<div style="background: #ddd;"><i class="fas fa-quote-left fa-sm fa-pull-left"></i>
<p>「fa-pull-left」と「fa-pull-right」は引用文などに使える。このように左上と右上に任意のアイコンを表示できます。</p></div>

アイコンを重ねる

アイコン同士を重ねるクラスも用意されています。下記のように「div class="fa-stack fa-〇〇」で囲ってからアイコンを二つほど貼り付けます。その後に「fa-stack-2x」「fa-stack-1x」のクラスを付けます。

fa-stack-2xの方が大きいので下レイヤーとなるアイコンに付けます。

 <div class="fa-stack fa-5x">
    <i class="fas fa-mobile-alt fa-stack-2x"></i>
    <i class="fas fa-align-justify fa-stack-1x fa-inverse" style="color:#ddd;"></i>
  </div>

アイコンを回転させる

クラス名回転
fa-rotate-9090°回転
fa-rotate-180180°回転
fa-rotate-270270°回転
fa-flip-horizontal水平方向に反転
fa-flip-vertical垂直方向に反転

<i class="fab fa-amilia fa-rotate-90"></I>
<i class="fab fa-amilia fa-rotate-180"></I>
<i class="fab fa-amilia fa-rotate-270"></I>
<i class="fab fa-amilia fa-flip-horizontal"></I>
<i class="fab fa-amilia fa-flip-vertical"></i>

アニメーションを付ける

Font Awesomeでは回転アニメーションが用意されています。

回転させたい場合は「fa-spin」のクラスを追加。8ステップで回転させたい場合は「fa-pulse」のクラスを付けることで可能です。

<i class="fas fa-sync-alt fa-6x fa-spin"></I>
<i class="fas fa-cog fa-6x fa-pulse"></I>
<i class="fas fa-fan fa-6x fa-spin"></I>
<i class="fas fa-spinner fa-6x fa-pulse"></i>

カスタム用CSSクラスまとめ(早見表)

クラス説明
fa-xs大きさ .75em
fa-sm大きさ .875em
fa-lg大きさ 1.33em
fa-2x(3x.4x.5x…)大きさ 2em(3em.4em.5em…)
fa-fw幅の統一
fa-ulリスト化
fa-liリスト化
fa-border枠線
fa-pull-left回り込み(左)
fa-pull-right回り込み(右)
fa-stack重ね合わせ
fa-rotate-90(180.270…)90°(180°.270°)回転
fa-flip-horizontal水平方向に反転
fa-flip-vertical垂直方向に反転
fa-spin回転
fa-pulse8ステップ回転

以上が「Font Awesomeの使い方まとめ【様々な使用パターン紹介】」でした。

今回の記事を参考にしていろんなパターンのアイコンデザインに挑戦してみて下さい。

2020年3月29日Tool/AppKnow-How,Software

Posted by KT