Font Awesomeの使い方① | Bootstrap4でFont Awesome v4.7を使用する

使えるようになるまでにちょっと敷居が高いけど、使えるようになるともう手放せないWebアイコンフォント。その代表格といえばFont Awesome!（「オゥサム」と読みます。素晴らしい！最高！って意味）

使えるようになったつもりでも、次の案件でまた使えなくなって豆腐（□）が表示されることを繰り返してるので、ここらで復習します。

第一回目は「Bootstrap4でFont Awesome v4.7を使用する」です。

Font Awesomeとは

Bootstrap5はこの記事を作成した時点でアルファ版がリリースされたばかりでした。この記事ではBootstrap4の利用方法をまとめております。過去に制作されてWEBサイトの更新作業などでまだ使う機会は多いかと思います。

Font Awesomeで用意されているCDNではなく、Bootstrap用意しているCDNを使用します。
head内にCSSを記述します（BootstrapのCDNより下に配置します）。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

このブログはWordpressのunderstrapというBootstrap4をベースしたテーマを使用しています。
このテーマではCDN等読み込まなくても、Font Awesome v4.7のアイコンセットを使用することができます。

上記公式のFont Awesomeサイトではめっちゃv5を薦めてくるんですが、まだv4.7も使うことができます。
ここでアイコンを選んでもいいのですが、慣れるまではJames Croftさんがまとめた下記チートシートが便利です（アイコンは全点が載ってなくピックアップされています）。

使用したいアイコンの「copy」をクリックし、タブを開きます。

HTMLタグで使用するときは、「HTML Tag」（hoverでタグが表示されます）をクリックすることで、タグをコピーすることができます。
そのコピーしたタグをペーストしてタグを貼れば表示されます。

<i class="fa fa-heart"></i>

Font Awesomeのハートアイコンが表示されました。

文中や文頭でHTMLタグを挿入するだけなので簡単に使用できます。
このように色を変える場合もcolor:#877666と、テキストと同じように変更できます。
楽しいですね。

先ほども述べたとおり、このブログはCDNを設置しなくてもFont Awesome v4.7が使用できます。つまり、このページで表示できてもあまり検証にはなりません。
なのでデモページも用意しました。

Bootstrap4.5でfontawesome4.7の表示デモ

Unicodeで使用したことが無いのでパスして、CSSで記述して使用する場合に移ります。
ここでは擬似要素での使い方です。

「CSS Rule」をクリックすると、content:"\f004";とコードがコピーできます。
Font AwesomeのWebアイコンフォントを使用しているので、font-family: FontAwesome;もセットで指定します。

<p class="fontawesome-test01">ダミーテキストです</p>

p.fontawesome-test01::before {
  font-family: FontAwesome;
  content:"\f004";
  padding-right: 3px;
}

ダミーテキストです

こちらもアイコンの色を変えたい場合は、color: #CE0000;といったように追記します。

ダミーテキストです

ボタン内に右寄せで配置などの場合は下記記事で触れてますので、参考にしてみてください。