Aikの技術的な進捗部屋

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

Font awesome備忘録

※今回の記事で扱うFont awesomeのバージョンは「5.2」です。

はじめに

Webページ上でこんな感じのアイコンが気軽に扱える、Font awesomeというライブラリに改めて触れられたので、勉強がてらのメモを。

Font awesomeとは?

fontawesome.com

Font awesomeは、フォントの一種…アイコン専門のWebフォントといった感じみたいです。
Font+CSS形式とSVG+JS形式の、2種類の利用方法があり…利用方法によって、使えるオプションが異なったりもするので注意が必要です。
※今回の記事ではFont+CSS形式前提で話を進めていきます

扱えるアイコンの数はなんと、3562種類あり…。
ホームアイコンや矢印アイコンハンバーガーメニューのアイコン等WebUIには欠かせないものから、TwitterFacebookのアイコン等の各種ブランドマークまで、幅広く対応してあります。

また、導入方法もローカルにDLするか、CDN形式かで選べます。
npmやyarm等のパッケージマネージャーからもインストール可能とのことです…!

なお無料版と有料版があり、ざっと見た感じでは、有料版で利用可能になることは「一部のアイコンのスタイルの変更」くらいでした。
※この辺り調べが甘い可能性高いです…。

2018/08/02現在の最新バージョンは「5.2」です。
旧バージョンとして「Font awesome4」もあり、解説サイトの中にはこちらのバージョンで解説しているものも多いと思います。

最新バージョンと旧バージョンでクラス名の指定方法が若干変わってたりしますが、基本的な使い方は同じですし、最新バージョンは旧バージョンとと互換性がある様なので…。
旧バージョンで学習して、その後最新Verの知識を補えばあまり問題はなさそうです。

※旧Ver→最新Verへの移行方法は下記の記事に書かれてあります。
旧Verと最新Verのアイコン対応表もありました。
Upgrading from Version 4 | Font Awesome

Font awesomeの使い方

ここからは具体的な使い方についてメモしておきます。

基本的な使い方

Font awesomeのアイコンを使うには、<i>タグという独自のタグを用います。
(<span>タグでもいけますが、Font awesome側は簡略化のため<i>タグを使用することを推奨しているそうです)

また、それに加えてクラスの指定も必要です。
fasまたはfab(企業のブランドアイコンだとこちらを使用)クラス + fa-使用したいアイコンクラスの2つのクラス指定が基本となります。

具体的には下記の様になります。

<i class="fas fa-home"></i>
<i class="fab fa-twitter"></i>

上記コードからはこれら2つのアイコンが出力されます→

なお、Font awesomeで生成されるアイコンは、フォントとして扱われるので…。
CSScolor属性で色の変更が可能です。
例えばこんな感じに→

また、この<i>タグに付与するクラス名を変更することで、アイコンの変更や様々なオプションの付与が出来ます。
次からは付与できるオプション等について述べていきます。

スタイルの変更(※有料版)

Font awesomeでは、一部のアイコンのスタイルを変更することができます。
※なお、こちらの機能は有料版のみの機能となっております。

変更方法は、指定するクラスをfasから→farfalへと変えるだけ。
2018/08/03時点では、2種類のスタイル(RegularかLight)を選択可能です。

サイズの変更

Font awesome側では、12段階のサイズ変更クラスを提供されています。
※最小: 、通常: 、最大:

ソースコードはこちら

最小:<i class="fas fa-xs fa-home"></i>
通常:<i class="fas fa-home"></i>
最大:<i class="fas fa-10x fa-home"></i> 

もちろんCSSfont-size属性をいじれば変更もできますが…。
ちょっとした変更程度ならこちらでやっちゃった方が早いかもですね。

公式ページに各クラスで指定できるサイズの拡縮率が記載されていたので、こちらにもメモしておきます。

クラス名 サイズ(1em=通常サイズ) 備考
fa-xs .75em
fa-sm .875em
fa-lg 1.33em vertical-align: -25%も付与
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em
アイコンの回転・反転

アイコンの回転も、Font awesomeでクラスとして提供されてあります。
こんな感じで使えます↓

通常: 90度回転: 180度回転: 270度回転: 左右反転: 上下反転:

ソースコードはこちら

通常:<i class="fab fa-twitter"></i>
90度回転:<i class="fab fa-rotate-90 fa-twitter"></i>
180度回転:<i class="fab fa-rotate-180 fa-twitter"></i>
270度回転:<i class="fab fa-rotate-270 fa-twitter"></i>
左右反転:<i class="fab fa-flip-horizontal fa-twitter"></i>
上下反転:<i class="fab fa-flip-vertical fa-twitter"></i> 

アイコンのアニメーション

Font awesomeにはアニメーション機能もあります。
アニメーションタイプはspinpluseの2種類あり、spinは滑らかに動き、pluseは8コマ感覚で動きます。
こんな感じ↓

ソースコードはこちら

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

アイコン幅の固定

デフォルトでは、アイコンの横幅は各アイコンの幅に合わせたサイズになっているのですが…。
例えば縦型に並べたナビゲーションバーだったりすると、それが弊害になる時もあります。
そう、こんな感じに…項目が綺麗に揃わなくなってしまうのです。

ホーム
ABOUT
設定

こういった状況のために、Font awesomeではfa-fwクラスが提供されてます。
こちらのクラスを設定すれば、アイコンの横幅が均一になるため、下記の様に綺麗に項目を揃えることができます。

ホーム
ABOUT
設定

ソースコードはこちら

<i class="fas fa-fw fa-home"></i>ホーム<br>
<i class="fas fa-fw fa-info"></i>ABOUT<br>
<i class="fas fa-fw fa-cog"></i>設定

アイコンのスタック(重ね表示)

アイコンを重ねて表現することもできます。
これをするには下記の様に、ちょっと特殊な指定をしなければなりません。

<span class="fa-stack">
  <i class="fas fa-square fa-stack-2x"></i> <!--背景にしたいアイコンを先に記述、サイズはメインアイコンの2倍-->
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> <!--メインに出したいアイコンは後に記述-->
</span>

上記のコードでこの様な表現ができます。
表現の幅が一気に広がりそうです!

段落の見出しにアイコンを使う

Font awesomeでは、アイコンの周りに枠線を作ったり(fa-border)、段落の左右にアイコンを固定したり(fa-pull-right,fa-pull-left)することができます。
これらを使えば下記の様に、段落の見出しにアイコンを使う表現もできちゃいます。

例1:
睡眠(すいみん、羅: somnus、仏: sommeil、英: sleep)は、眠ること、すなわち、周期的に繰り返す、意識を喪失する生理的な状態のことである。ねむりとも言う。体の動きが止まり、外的刺激に対する反応が低下して意識も失われているが、簡単に目覚める状態のことをこう呼んでいる。ヒトは通常は昼間に活動し、夜間に睡眠をとる。動物では夜間に活動し、昼間に睡眠をとるものも多い。 ※Wikipedia「睡眠」より引用

例2:
今回の記事で、何とかRails環境構築は出来たので…。次回の記事では、Railsで簡単なアプリを作ってみたいなと思います。環境構築と違いPrograteで大まかな流れは掴んでるので、上手くいけばいいなぁ、いいなぁ…。

ソースコードはこちら

<i class="fas fa-bed fa-2x fa-pull-left"></i>
睡眠(すいみん、羅: somnus、仏: sommeil、英: sleep)は、眠ること、すなわち、周期的に繰り返す、意識を喪失する生理的な状態のことである。ねむりとも言う。体の動きが止まり、外的刺激に対する反応が低下して意識も失われているが、簡単に目覚める状態のことをこう呼んでいる。ヒトは通常は昼間に活動し、夜間に睡眠をとる。動物では夜間に活動し、昼間に睡眠をとるものも多い。  
※[Wikipedia「睡眠」](https://ja.wikipedia.org/wiki/睡眠)より引用
<i class="fas fa-angle-right fa-2x fa-pull-right fa-border"></i>
今回の記事で、何とかRails環境構築は出来たので…。次回の記事では、Railsで簡単なアプリを作ってみたいなと思います。環境構築と違いPrograteで大まかな流れは掴んでるので、上手くいけばいいなぁ、いいなぁ…。

その他の機能について

その他にも、リストの先頭文字にアイコンを使用できたりしますが…。
流石に長くなりすぎちゃうので、ここでは割愛しておきます。

最後に

タグ指定をするだけで、気軽に高品質なアイコンが扱えるFont awesome…。
筆者も既に色んな場面でお世話になってましたが、改めてしっかりと調べ、その有用性を実感できたなと思います。

今後ともお世話になります、Font awesomeさん…!

補足- Font awesomeを使用する際の注意点

Font awesome公式ページの「Accessibility」の所に、Font awesomeを使用する際の注意点的な事柄が記載されてありました。

まぁ、Font awesomeを使うと単なるアイコンを載せるだけなのにHTMLファイルに余計な情報を載せてしまうことになりますからね…。
でも、その辺りの注意点等もしっかり公式ページに載ってる辺り流石だなと思います。

せっかくなので、その補足事項に関してもこちらで軽くまとめておこうかと思います。

単なるアイコンならaria-hidden属性をつける

アイコンを単に修飾目的で使うのであれば、aria-hidden属性をつけましょう。
この属性をつけると、スクリーンリーダーでこのタグが読み取られなくなります。余計な情報を削除できるって感じですね。

ソースコードとしては下記の様になります。

<i class="fas fa-angle-right" aria-hidden></i>

意味のあるアイコンならaria-labelやtitleでアイコンの説明を

アイコンを意味のある用途(削除ボタンとか、新規作成ボタンとか)に使うなら、aria-label属性やtitle属性でアイコンの説明をしましょう。

なお、aria-label属性はスクリーンリーダーにそのタグの情報を渡す文字列を設定するもので、title属性は指定した文字列を補足情報として表示させるものです。

なお、title属性で指定した文字列は、マウスオーバーでツールチップとしてその文字列が出てくる様になります。
スマホタブレットからアクセスする様なサイトでは、こちらは指定しなくてもいいかもしれませんね。

具体的には下記の様に指定しましょう。
※例:ゴミ箱アイコンを用いた削除ボタン (Font awesome公式ページより引用)

<a aria-label="Delete" class="btn btn-danger" href="path/to/settings">
  <i aria-hidden class="fas fa-trash" title="Delete this item?"></i>
</a>