本サイトにも多用しているFont Awesomeがバージョン5にアップグレードしました。
今回のバージョンでは、個々のアイコンの名称やマークアップタグに変更がありましたので、これに対応した経過を記述してみたいと思います。
Get started with Font Awesome(英文)を見てみると、利用方法が次の通りとなっています。
  1. Javascriptで実現する方法
  2. CSSによる方法
  3. デスクトップで使う場合
本サイトでは2番の方法で利用していましたので、今回も同様に進めてみた手順が次の通りです。
  1. Font AwesomeのサイトからDownload Freeボタンをクリックして入手します。
  2. 入手したZIPファイルを解凍し、解凍されたフォルダ内のweb-fonts-with-cssフォルダをサイトの然るべきディレクトリにアップロードしておきます。このときアップロードしたフォルダの名前をfont-awesome等のように適宜変更しておきます。
  3. アイコンを表示させたいページのheadタグ内に下記の行を記述します。
    <link href="/font-awesome/css/fontawesome-all.css" rel="stylesheet">
    これは、web-fonts-with-cssフォルダをドキュメントルート直下にアップロードして、font-awesomeと改名した場合ですので、href属性の設定値は、ご利用の環境に合わせて適切に変更して下さい。
  4. アイコンの中には名称の変更や、廃止となったものがあります。
    そのためFont Awesome Iconsのページにて、これまで使用していたアイコン名について、ひとつずつ存否の確認をする必要があります。
    例えば、これまでメールのアイコンとして使っていた封筒のイメージが、新バージョンでも使用できるか確認する場合を想定してみましょう。
    1. まず前掲ページの検索フォームに封筒を意味するenvelopeとキーワードを入れて検索すると、概念が近いイメージのアイコンがリストアップされます。
    2. リストの中にenvelopeアイコンがありますので、これをクリックします。
    3. そのアイコンの詳細ページが開き、
      <i class="far fa-envelope"></i>
      というマークアップ用タグが表示されていますので、これをコピーします。
    4. 修正したいページ内の
      <i class="fa fa-envelope-o"></i>
      となっている個所を、手順04-03でコピーしたタグと置き換えます。
  5. 以下使用しているアイコンの個数だけ、手順04の部分を繰り返します。
クラス名に変更がないものもありますが、fa-envelopeとfa-envelope-oのように全く変わってしまったものもかなりあるようです。
またクラス名変更の有無に関わらず、前バージョンでは同時にマークアップされていたfaクラスが、新版ではfab、far、fasのいずれかに変わっていますので注意して下さい。
変更作業を楽にするために、予めバージョンアップ前後のマークアップタグを抽出しておき、エディタソフトを使って新しいタグに置換すると良いと思います。

行頭記号等に使用している場合

この段落の見出しタグに使っている行頭記号にFont Awesomeのアイコンを用いるには、CSSをカスタマイズすることで実現しています。
CSSの記述例は以下の通りです。
h4:before {

	font-family: 'Font Awesome 5 Free';	/* Ver.4から変更されました */

	content: '\f192';	/* 黒地に白丸アイコンのユニコード */

	margin-right: 3px;	/* アイコンと文字が近づきすぎないように */

}
各々のアイコンのユニコードは、前段手順04-03で触れたページ内で確認できます。