Webアイコンフォントで有名な「Font Awesome」。実はデザインにも利用できます。
Adobeツールなら「Illustrator」「Photoshop」「XD」で使用可能。
流れとしては、
- 公式サイトにある「For The Desktop」からファイルをダウンロード
- 展開したフォルダからフォントをインストール
- コピーしたアイコンを「文字ツール」で貼り付ける
という3ステップ。
最後に「Font Awesome 6」とついたフォントを指定すれば、設置完了です。
Adobeツールに慣れていれば5分くらい。はじめてでも10分ほどでできますよ！
「Illustrator」と「Photoshop」は画面操作が同じなので、後者は割愛します。
「HTML」や「CSS」を使って、サイトに表示したいときは、以下をご覧ください。
目次
フォントをダウンロード
「Font Awesome」にアクセスし、「Start」を開きます。
「Other Ways to Use」のエリアにある「Download」をクリック。
PCのアプリを使うので「For The Desktop」からダウンロードします。
今回は無料プランで利用できる「Free For Desktop」をクリック。
フォントをインストール
ダウンロードしたデータを展開し「otfs」フォルダを開きます。
Font Awesome 6 Brands-Regular-400.otf Font Awesome 6 Free-Regular-400.otf Font Awesome 6 Free-Solid-900.otf
任意のフォントをクリックして、インストール。
残りの2つも同じ手順でインストールしてください。
インストール内容を確認
念のため、フォントがインストールされているか確認します。
スタートメニューから「設定」をクリック。
設定一覧から「個人用設定」をクリック。
つづいて「フォント」をクリック。
「使用可能なフォント」が表示されます。
「Font Awesome」で検索すると、以下のように出てくるはず。
各フォントページからアンインストールもできます。やり直したいときは、こちらから実行してください。
アイコンを選ぶ
「Font Awesome」の「Icons」で、アイコンを検索します。
検索ボックスに「英語で」キーワードを入力。
カテゴリは「Solid」「Regular」「Brands」の3つが選択されていればOK。
「Regular（一部）」「Light」「Thin」「Duotone」は、Pro限定で利用できます。
今回は無料枠なので「Free」にチェックを入れて、アイコンを絞ります。
選んだアイコンのダイアログにある「Glyph（絵文字）」をクリックしてコピー。
このとき、HTMLコードのスタイルも確認してください。
例はfa-regularになっています。
デザインツールで表示
Illustratorの場合
Illustratorにアートボードを用意します。
「文字ツール」に変えて、先ほどコピーしていたアイコンをCtrl+Vでペースト。
ここで「選択ツール」に戻して、入力を解除しておきます。
フォントメニューで「Font Awesome」と検索。
インストールしたフォントが出てきたら、その中から適切なスタイルを選びます。
例ではfa-regularとなっているので「Font Awesome 6 Free Regular」を適用。
Adobe XDの場合
XDもIllustratorとほとんど同じです。
「文字ツール」にしてから、アイコンをCtrl+Vでペースト。
フォントで「Font Awesome」と検索します。
Illustratorと違うのは、ここのフォント名。「Brands」と「Free」に「Regular」の文字がありません。
「Free」のスタイルは「Solid」なのか、それ以外かという区分になっているので、
無料プランの「Regular」であれば「Font Awesome 6 Free」で表示できます。
「Brands」に関しては「Regular」の有無にかかわらず、共通のスタイルとして扱えばOK。
過去のバージョンを利用（任意）
ダウンロードページの最新より下に、バージョン一覧があります。
「Font Awesome 5」を利用するときは、ドロップダウンで表示切替が必要。
使いたいアイコンや状況にあわせてダウンロードしてください。
おわりに
「Font Awesome」をデザインツールで使う方法は以上になります。
アイコンが表示されないときは、
- アイコンのスタイル
- ダウンロードデータのバージョン
- フォントのインストール状況
を改めて確認してみてください。
今回は「フォント」として利用しましたが、「SVG」データもダウンロード可能。
高解像度、軽量なので、Webサイト周りでは重宝します。
デザインカンプや広告バナーに入れるなど、いろいろな場面で役立ててください。
