FontAwesomeの設定

は / By
トップ背景

FontAwesomeの設定

FontAwesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富で、コーデイングの際には本当によく使います。

ただ、疑似要素（::beforeや::after）に記述したりなど、使い方にコツがあったりします。

私なりの使い方のコツを解説します。

無料版と有料版がありますが、無料版で十分です。

FontAwesome公式サイト：https://fontawesome.com/

FontAwesomeとは・・・

Webサイトでアイコンフォントを簡単に導入することができるサービスです。

アイコンフォントとは、アイコン画像をテキストと同じように表示することができる優れたものです。

FontAwesomeを使うメリット

  • 簡単な記述でアイコンを表示することができる
  • テキストと同じようにサイズや色を変えられる
  • サイズを大きくしても画像が粗くならない
  • 無料でも１０００種類以上用意されている

FontAwesomeを読み込む方法

現在、FontAwesomeを読み込む方法には２通りになっています。

FontAwesomeのトップ画面
  1. 「Kit」を使って読み込む
  2. ダウンロードする

Kitを使って読み込む

  1. FontAwesomeでアカウントを作成してログイン後に「Kit」をクリックする
  2. 手順に沿って設定していくと<script>タグで囲まれたコードが表示されます
  3. これを<head>内に貼り付けます。

ダウンロードする

  1. サイト上で「Downroad」をクリック
  2. 「Free For Web」を選びダウンロード
  3. zipファイルを解凍して保存
  4. cssフォルダ内の「all.css」ファイルを作業中のcssフォルダにコピペする
  5. <head>タグ内で読み込む
    • <link rel=”stylesheet” href=”css/all.css”>

FontAwesomeの使い方

「Icon」ボタンをクリックすると次の画面が出てきます。

最も早い検索方法は、検索窓に英単語を入れることです。

残念ながら日本語対応していないので、「日本語（例：棒）＋英語」のキーワードを使ってグーグル検索してください。

数が多いので検索に時間がかかりますが、上部に「Solid」「Regular」「Light」「Thin」「Duotone」の５種類の太さを選ぶボタンと「Brands」ボタンを使う方法があります。

太さは後で選びなおすことができますので安心してください。

アイコンを表示する

使用したいアイコンをクリックする。

上部に太さを変えるボタンがありますね。

黒枠の中に下記コードがあるのでHTMLの張り付けたい場所にコピペするだけです。

<i class="fa-duotone fa-hockey-sticks"></i>

スタイルを変更したい場合は、任意のクラスを指定するなどして、通常通りCSSでスタイルを指定すれば色やサイズなどを変えることができます。

疑似要素でアイコンを表示する

疑似要素というと ::before や ::after があります。

先ずはHTMLタグにクラスを付けます。

<button class="button-icon"></button>

疑似要素を使用する際は親クラスに position: relative; を忘れずに設定してください。
これで、親要素の中では自由に配置することができます。

contentの中にはunicode（ユニコード）を記述します。
を表示する」画像内の右上にある「f454」です。

.button-icon {
 position: relative;
}

.button-icon::before {
 position: absolute;
 content: "\f454";
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 top: 0;
 left: 0;
}

※注意点としてcontentの中にあるバックスラッシュはWindowsでは表示されないので「￥」を使いましょう！！

Freeをお使いの方はfont-weightを900もしくは400にしか設定できません。

StyleAvailabillityfont-weight
SolidFree900
RegularPro400
LightPro300
BrandsFree400

疑似要素でアイコンが表示されない？？

ここまで来たら問題が発生しているはずです。

理由は、思わずPro版を使用しているからです。

Free版を選択するには「FontAwesomeの使い方」の画面左に「Free」という文字がありますのでクリック。

すると、今度はFreeで使えるアイコンが表示されます。

使えるアイコン数は減りますが、これで疑似要素で問題なく使えるようになります。

Font Awesomeのカスタマイズ

アイコンの色を変更する

直接htmlに直接記述する方法。

<i class="fa-brands fa-sticker-mule" style="color:red;"></i>

cssの場合は「i」タグに対して記述すればOKです。

i {
 color: red;
}

アイコンのサイズを変更する

HTMLでサイズを指定する際はクラス名を記述します。

クラス名表示サイズ
fa-xs.75em
fa-sm.875em
fa-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

アイコンの横幅を揃える

Font Awesomeのアイコンは、それぞれ横幅が異なるためそのまま使用すると並べた時にガタガタしてしまいます。

そこで、「fa-fw」というクラス名を追加すれば解消されます。

リストで使う場合

アイコンをリストで使用する場合には、ulタグ、もしくはolタグのクラス名にfa-ulを、liタグの中のiタグのクラス名にfa-liを指定します。

アイコンを回転・反転させる場合

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

アイコンをアニメーションで動かす

回転するアニメーションと相性がいいのは、「Spinners」と呼ばれているアイコンです。

クラス名アニメーション
fa-spinアイコンを回転させる
fa-pulseアイコンを8ステップで回転させる

アイコンをテキストに回り込み表示する

文章の引用符に使用する場合などに、float属性を付与してテキストを回り込み表示させることができます。

クラス名挿入するクラス名
float: left;fa-pull-left
float: right;fa-pull-right
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

ボーダーをつける

アイコンにボーダーを付けたい場合は、fa-borderクラスを付与します。

<i class="fas fa-arrow-right fa-2x fa-border"></i>

アイコンを重ねる

  • 親要素にfa-stackクラスを付与
  • アイコンにfa-stack-1x、もしくはfa-stack-2xクラスを付与

fa-stack-1xを指定すると等倍で、fa-stack-2xを指定すると2倍のサイズで表示されます。