We Blog Weblog

Font Awesome

Web

2021年12月15日

Font Awesome

 

みなさんこんにちは。
ケミストの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-xs

fa-sm

指定なし

fa-lg

fa-2x

fa-3x


③ 枠で囲む

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>デスクトップ

指定なし

スマホ

タブレット

ラップトップ

デスクトップ

fa-fwを指定

スマホ

タブレット

ラップトップ

デスクトップ

<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>
  • Chrome
  • Edge
  • Safari
  • Firefox
  • Internet Explorer

⑤ 回転・反転

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-rotate-90

fa-rotate-180

fa-rotate-270

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>

+BC


⑥ くるくる回り続ける

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

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

fa-spin

fa-pulse

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


⑦ アイコンを重ねる

<span>タグにfa-stackを設定し、その中にアイコンを2つ、背面→前面の順に入れます。
fa-stack-1xfa-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"に変える

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP