便利なWebフォントとして、世界中の人が利用している Font Awesome もバージョン5になって、しばらく経ちました。
バージョン4 に比べて使いづらいところもありますが、デザインを見比べてみると、かなり描き直しているらしく、結構格好良くなっているようです。
そんな Font Awesome もバージョン5.2 に上がって、コロコロと変わっていた使い方も落ち着いてきたようです。
だからボクが試行錯誤してきた使い方を、簡単に書いておきます。
ファイルのダウンロードと解凍
Font Awesome では、インターネット上にある Webフォントファイルに、リンクを貼ることを推奨しているようです。
しかしボクは、Webフォントファイルをダウンロードして、自分のサイトに配置しました。
Font Awesome の Webサイトの画像が新しくなりました。
ファイルのダウンロード
作業手順：
- Font Awesome の Webサイトを開く
- 「Start Using Free」ボタンをクリック
作業手順：
- 「Start a New Project」ページの下の方にある「Download」ボタンをクリック
作業手順：
- 「Hosting Font Awesome Yourself」ページの「Font Awesome Free for the Web」ボタンをクリック
- ファイル「FontAwesome-free-5.x.x-web.zip」がダウンロードされる
ファイルの解凍
つぎに、適当な解凍ソフトを使って、ダウンロードしたファイルを解凍しました。
たくさんフォルダが並んでいますが、必要なのは次の ２つのフォルダだけです。
- cssフォルダ ………… Font Awesome に必要なスタイル定義の CSSファイル
- webfontフォルダ …… Font Awesome フォントそのもの
ファイルのコピーと関連付け
Font Awesome がバージョン5 になり、絵文字が 4つのカテゴリーに分類されています。
- Solidカテゴリー ……… 絵文字の中身が詰まっている
- Regularカテゴリー … 絵文字が線で書かれている
- Lightカテゴリー ……… 絵文字が細い線で書かれている（Pro版専用）
- Brandsカテゴリー …… 企業の商標、ロゴマーク
使わないカテゴリーの絵文字を読み込まないようにもできます。
すべてのカテゴリーを使うための準備
Font Awesome 5 Free版で使用できる、すべてのカテゴリーの絵文字を読み込むには、次のようにしました。
ただし、Font Awesome 5 Free版では、使用できる絵文字が制限されています。
Lightカテゴリーに属する絵文字などは、まったく使えません。
必要なファイルのコピー
つぎのようにして、必要なファイルをコピーしました。
- cssフォルダから、スタイル定義「all.min.css」を自分の Webサイトのルートにある cssフォルダにコピー
- webfontフォルダをまるごと、自分の Webサイトのルート（一番上）にコピー
HTML で関連付け
さらに、Font Awesome を使いたい HTMLファイルの中の headタグの間に、次の記述を追加しました。
なお、href の中の cssフォルダには、cssフォルダまでの相対アドレスを指定しました。
<head>
～
<link rel="stylesheet" href="cssフォルダ/all.min.css">
～
</head>とりあえずこれで、Font Awesome 5 Free版を使うための準備は終了です。
Solidカテゴリーだけを使うための準備（補足）
Font Awesome 5 Free版をしばらく使っていると気付くのですが、ボクがよく使う絵文字は、ほとんど Solidカテゴリーに属する絵文字ばかりでした。
あまり使わないカテゴリーのファイルを読み込むことは無駄です。
ということで、使っていた Regularカテゴリーの絵文字を、Solidカテゴリーの絵文字に置き換えて、Solidカテゴリーの絵文字だけを読み込むように変更しました。
必要なファイルのコピー
つぎのようにして、必要なファイルをコピーしました。
- cssフォルダから、スタイル定義「solid.min.css」と「fontawesome.min.css」を自分の Webサイトのルートにある cssフォルダにコピー
- webfontフォルダの中の「fa-solid-900.xxx」を、自分の Webサイトのルートに作った webfontフォルダの中にコピー
なお、cssフォルダの中の「all.min.css」と webfontフォルダの中の「fa-brands-400.xxx」や「fa-regular-400.xxx」は要らなくなりました。
HTML で関連付け
Font Awesome を使いたい HTMLファイルの中の headタグの間に、次の記述を追加しました。
なお、href の中の cssフォルダには、cssフォルダまでの相対アドレスを指定しました。
<head>
～
<link rel="stylesheet" href="cssフォルダ/solid.min.css">
<link rel="stylesheet" href="cssフォルダ/fontawesome.min.css">
～
</head>これで、Font Awesome 5 Free版の Solidカテゴリーを使うための準備は終了です。
準備が終わって
Font Awesome 4 で使用できた絵文字は、基本的に Font Awesome 5 Free版でも使用できるようになっているはずです。
しかし、Font Awesome 5 Pro版には、使いたくなるような絵文字が盛りだくさんです。
今のところ、Solidカテゴリーで済ませていますが、これからどうなることやら？
次回は、Font Awesome 5 Free版の実際の使用方法についてです。
コメント