Webアイコンフォントの王道、"Font Awesome"のVer.5がリリースされ、少しずつ浸透してきましたね！ アイコンフォントの周りに円い縁取りをつけるときの注意点を、ここではご紹介します。特に、CDNのjsファイルを読み込んでいる場合、スタイル指定はWebアイコンフォント自体にではなく、ラッパーにつけなければなりません。

▼本記事では本家のページを参考にしました
Get Started | Font Awesome
https://fontawesome.com/get-started

Font Awesome 5 のおさらい

さっそく、公式サイトイチオシのやり方で、Webサイトにアイコンフォントをのっけてみましょう。
HTMLファイルの<head>～</head>の間に、以下のタグを挿入します。

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Ver.5からは、cssファイルではなくjavascriptファイルがオススメになっているところがポイント。
（v5.0.6の部分は、アップデートがあるたび番号を変えなければならないので面倒ですが……）

そして、HTMLファイルのbody部分中に、以下のようにタグを入れればオッケー。

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

上の例では、文中にtwitterアイコンが表示されます。
ほかにもfacebookアイコンとかRSSアイコンとか用意されていて、classの中身を差し替えるだけで簡単に表示できます。

無料で利用できるアイコンは、以下から選べます。
https://fontawesome.com/icons?d=gallery&m=free
アイコンをクリックして遷移する画面の真ん中くらいに、挿入するコードが表示されるはずです。

アイコンフォントにクラスを直接あてると……

さて、アイコンフォントの魅力は、何といっても使い慣れたCSSで加工できること。
大きさ、色、アニメーションなども、CSSで実装できます。

ただし、Font Awesome Ver.5は、オススメ設定でjavascriptファイルを読み込んでいる場合、思わぬ落とし穴が……。ためしに、僕がいま絶賛作成中のランディングページ（サイト？）下部の、アイコンを見てみましょう。これはFont Awesomeからとってきたアイコンです。アイコンの周りに円い縁取りがしてありますね。

アイコンの周りに円い縁取りがしてある

円形の線で囲うには、CSSでborderをひき、続いてborder-radius: 50%と指定したクラスをタグにあてます。contactme-iconクラスにその指定をつけてあげるとすると、以下の通りです。

.contactme-icon {
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  border: 4px solid;
  border-radius: 50%;
  color: #b0b9bb;
  font-size: 8rem;
  line-height: 152px;
}

そこで僕は最初、以下のようにiタグにcontactme-iconクラスを、直接あてていました。

<!-- 右側のアイコンのソースだけ抜粋 -->
<i class="contactme-icon fab fa-twitter"></i>

そうしたらですね、以下のような画面になったわけですよ。

何か知らんがアイコンが認識されていないもよう

きっとjavascriptの処理のせいだと思いますが、iタグに直接クラスをあてるとアイコン自体が無視されるようです。

アイコンを囲んだラッパーにクラスをあてると、うまくいく

そこで、アイコンフォントの周りにdivタグでラッパーを作成し、そこにcontact-meクラスをあててみました。

<!-- 右側のアイコンのソースだけ抜粋 -->
<div class="contactme-icon"><i class="fab fa-twitter"></i></div>

CSSは変更なし。この変更後は、想定通りに表示されました。

……そんなに大した話でもないのですが、書籍やWebサイトによっては旧い記述もあるので、注意が必要です。

さて、ランディングページの追加実装、明日の振替休日中にがんばらねば……。