Font Awesome

2021年12月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「Font Awesome」についてまとめます。

参考：サルワカ｜【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

参考：デジタルマーケティングブログ｜【最新版】Font Awesome 5でアイコンを表示させよう！

参考：Web-saku｜Font Awesome最新バージョン(5.x)と旧バージョン(4.7)の使い方

Font Awesomeとは

Font Awesomeとは、ウェブサイトなどでWebアイコンフォント（絵文字みたいなもの）を表示できるサービスです。

無料版と有料版があり、有料版では使える種類や太さが増えます。
どちらも商用利用が可能です。

全部で7864種類あり、無料版はそのうち1608種類が使えます。

ちなみにAwesomeは「オーサム」と読みます。ずっとアウェサムだと思ってた

意味は「畏怖の念を起こさせる」「畏敬の念に満ちた」「恐ろしい」
そこから転じて「素晴らしい」「最高」「カッコイイ」「ヤバイ」というスラングとして使われるようになったそうです。

種類

・Solid（太い）

・Regular（普通）

・Light（細い※有料版のみ）

・Duotone（濃淡※有料版のみ）

・Brands（有名企業のロゴ）

の5つのタイプがあります。

使い方

もうすぐバージョン6がリリース予定とのことですが、今回はバージョン5について説明します。

① ヘッダー内でcssを読み込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

② Font AwesomeのIconへアクセス

③ 使いたいアイコンのページを開く

ためしにpillsというアイコンを使ってみましょう。

<i>タグにfas fa-pillsというクラスを記述します。

<i class="fas fa-pills"></i> 薬剤師募集中！

上記のpillsはSolidなので「fas」ですが、
Regularの場合は「far」
Lightは「fal」
Duotoneは「fad」
Brandsは「fab」になります。

アレンジいろいろ

クラスを使っていろいろアレンジすることができます。

① 色を変える

文字と同様、クラスやスタイルで色を変更できます。

<i class="fas fa-sun" style="color:red"></i>
<i class="fas fa-cloud text-secondary"></i>
<i class="fas fa-umbrella text-primary"></i>

② 大きさを変える

fa-xsで0.75倍
fa-smで0.875倍
fa-lgで1.33倍
fa-2xで2倍
fa-3xで3倍にできます。

<i class="fas fa-table-tennis fa-xs"></i>
<i class="fas fa-baseball-ball fa-sm"></i>
<i class="far fa-futbol"></i>
<i class="fas fa-football-ball fa-lg"></i>
<i class="fas fa-volleyball-ball fa-2x"></i>
<i class="fas fa-basketball-ball fa-3x"></i>

③ 枠で囲む

fa-borderで枠線を付けられます。
枠線の色も変更可能です。

<i class="fas fa-pills fa-border border-danger"></i>
<i class="fas fa-tablets fa-border border-success"></i>
<i class="fas fa-capsules fa-border border-primary"></i>

④ 幅を揃える

fa-fwを使って、いい感じに左右の余白を作ることができます。

<i class="fas fa-mobile-alt fa-fw"></i>スマホ
<i class="fas fa-tablet-alt fa-fw"></i>タブレット
<i class="fas fa-laptop fa-fw"></i>ラップトップ
<i class="fas fa-desktop fa-fw"></i>デスクトップ

<ul>タグにfa-ul、<li>タグの中のアイコンに<span>タグでfa-liを付与することで、リスト（箇条書き）にできます。
この方法でも幅を揃えることができます。

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fab fa-chrome"></i></span>Chrome</li>
  <li><span class="fa-li"><i class="fab fa-edge"></i></span>Edge</li>
  <li><span class="fa-li"><i class="fab fa-safari"></i></span>Safari</li>
  <li><span class="fa-li"><i class="fab fa-firefox-browser"></i></span>Firefox</li>
  <li><span class="fa-li"><i class="fab fa-internet-explorer"></i></span>Internet Explorer</li>
</ul>

⑤ 回転・反転

fa-rotate-90で90度
fa-rotate-180で180度
fa-rotate-270で270度傾けることができます。

<i class="fas fa-circle-notch"></i>
<i class="fas fa-circle-notch fa-rotate-90"></i>
<i class="fas fa-circle-notch fa-rotate-180"></i>
<i class="fas fa-circle-notch fa-rotate-270"></i>

fa-flip-horizontalで左右反転
fa-flip-verticalで上下反転ができます。

<i class="fas fa-dog"></i>
<i class="fas fa-dog fa-flip-horizontal"></i>
<i class="fas fa-dog fa-flip-vertical"></i>

もちろんクラスやスタイルで自由に角度を設定できます。
これで格ゲーのコマンドも入れ放題ですね（誰得）

<i class="fas fa-arrow-up" style="transform:rotate(〇〇deg);"></i>

⑥ くるくる回り続ける

fa-spinでくるくる回り続けます。
fa-pulseで8段階で回転します。

<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

Font Awesomeには他にも様々なアニメーションパターンがありますが、それはまた別の記事で紹介します。

⑦ アイコンを重ねる

<span>タグにfa-stackを設定し、その中にアイコンを2つ、背面→前面の順に入れます。
fa-stack-1x、fa-stack-2xで大きさを設定します。
fa-inverseで白黒反転します。

<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-link fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack">
<i class="fas fa-smoking fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:red;"></i>
</span>

⑧ CSSの擬似要素で使う

擬似要素beforeを使ってCSSで設定することができます。

アイコン個別ページの上の方にあるコード（Unicode）を使います。
例えばenvelopeのコードはf0e0
phone-altのコードはf879
lineのコードはf3c0です。

.mail::before {
  content: '\f0e0';
  font-family: "Font Awesome 5 Free";
}

.tel::before {
  content: '\f879';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.line::before {
  content: '\f3c0';
  font-family: "Font Awesome 5 Brands";
}

<span class="mail">メール</span>
<span class="tel">電話</span>
<span class="line">ライン</span>

ここにはハマリポイントが3つあります。

① Unicodeの前に\（バックスラッシュ）

② Solidの場合はfont-weightに900を設定する

③ Brandsの場合はfont-familyを"Font Awesome 5 Brands"に変える

まとめ

アイコンの一覧を眺めているだけで楽しくなりますね。

次回はFont Awesomeアニメーションに挑戦してみます！