【Webフォント】フォントオーサム5フリー版の使い方 その1 (配置と関連付け篇)

ホームページ
この記事は約5分で読めます。

便利なWebフォントとして、世界中の人が利用している Font Awesome もバージョン5になって、しばらく経ちました。

バージョン4 に比べて使いづらいところもありますが、デザインを見比べてみると、かなり描き直しているらしく、結構格好良くなっているようです。

そんな Font Awesome もバージョン5.2 に上がって、コロコロと変わっていた使い方も落ち着いてきたようです。

ライターの男性

だからボクが試行錯誤してきた使い方を、簡単に書いておきます。

スポンサーリンク

ファイルのダウンロードと解凍

Font Awesome では、インターネット上にある Webフォントファイルに、リンクを貼ることを推奨しているようです。

しかしボクは、Webフォントファイルをダウンロードして、自分のサイトに配置しました。

Font Awesome の Webサイトの画像が新しくなりました。

ファイルのダウンロード

Font Awesome の Webサイト

作業手順:

  1. Font Awesome の Webサイトを開く
  2. 「Start Using Free」ボタンをクリック
Font Awesome のスタート画面

作業手順:

  1. 「Start a New Project」ページの下の方にある「Download」ボタンをクリック
Font Awesome のダウンロード画面

作業手順:

  1. 「Hosting Font Awesome Yourself」ページの「Font Awesome Free for the Web」ボタンをクリック
  2. ファイル「FontAwesome-free-5.x.x-web.zip」がダウンロードされる
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

ファイルの解凍

Font Awesome を解凍したフォルダの中身

つぎに、適当な解凍ソフトを使って、ダウンロードしたファイルを解凍しました。
たくさんフォルダが並んでいますが、必要なのは次の 2つのフォルダだけです。

  • cssフォルダ  ………… Font Awesome に必要なスタイル定義の CSSファイル
  • webfontフォルダ …… Font Awesome フォントそのもの
圧縮・解凍ソフト 7-Zip
圧縮・解凍ソフト7-Zipは、7z、ZIP、RAR、LZH、ISO、TAR、DMG、MSIなど、さまざまなデータフォーマットに1つで対応している世界的にデファクトのフリーソフトウェアです。AES256による暗号化(パスワード圧縮および解凍)も可能なおすすめのソフトです。

ファイルのコピーと関連付け

カラフルなカップケーキ

Font Awesome がバージョン5 になり、絵文字が 4つのカテゴリーに分類されています。

  • Solidカテゴリー ……… 絵文字の中身が詰まっている
  • Regularカテゴリー   … 絵文字が線で書かれている
  • Lightカテゴリー ……… 絵文字が細い線で書かれている(Pro版専用)
  • Brandsカテゴリー …… 企業の商標、ロゴマーク

使わないカテゴリーの絵文字を読み込まないようにもできます。

すべてのカテゴリーを使うための準備

準備中

Font Awesome 5 Free版で使用できる、すべてのカテゴリーの絵文字を読み込むには、次のようにしました。

ただし、Font Awesome 5 Free版では、使用できる絵文字が制限されています。
Lightカテゴリーに属する絵文字などは、まったく使えません。

必要なファイルのコピー

コピーアンドペースト

つぎのようにして、必要なファイルをコピーしました。

  1. cssフォルダから、スタイル定義「all.min.css」を自分の Webサイトのルートにある cssフォルダにコピー
  2. 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カテゴリーの絵文字だけを読み込むように変更しました。

必要なファイルのコピー

コピーアンドペースト

つぎのようにして、必要なファイルをコピーしました。

  1. cssフォルダから、スタイル定義「solid.min.css」と「fontawesome.min.css」を自分の Webサイトのルートにある cssフォルダにコピー
  2. 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版の実際の使用方法についてです。

コメント

タイトルとURLをコピーしました