Font Awesomeのアイコンを Adobeソフトで使う方法

デザイン

アイコンは画像として扱うこともありますが、WEBフォントと同じように利用できる、アイコンフォントがあります。

XDやIllustrator、PhotoShopなどでデザインする際にも、画像として扱わず、フォントとして呼び出すことができます。

今回は、Font Awesomeのアイコンを Adobeソフトで使う方法をご説明します。

WEBで表示させるFont Awesomeのアイコンフォントをそのまま利用できると、画像書き出し読込の必要がないので、コーディングが楽になります。

ローカルPCにインストールするアイコンフォントをダウンロードする。

fontawesome公式サイトに行きます。
「Start Free」のボタンをクリックします。

Desktop(Install locally and use in desktop apps.)」のボタンをクリックします。

「Download Font Awesome Free for the Desktop」をクリックし、フォントをダウンロードします。

アイコンフォントをPCにインストールする

ダウンロードしたzipファイルを解凍し「otfs」フォルダを開きます。

赤枠で囲んでいる、3つのフリーフォントのotfファイルをクリックし、PCにインストールします。

PCにFont Awesomeのフォントがインストールされました。

Font Awesomeは無料で利用できるフォントは「Brands-Regular」「Free-Regular」「Free-Solid」3種類あります。

  • Font Awesome 5 Brands-Regular-400.otf
  • Font Awesome 5 Free-Regular-400.otf
  • Font Awesome 5 Free-Solid-900.otf

任意のアイコンのフォントコードをコピーする

fontawesome公式サイトのiconリストのページを開きます。

左メニューからダウンロードしたアイコンフォントの種類を選択します。
今回は「Free」「Solid」で絞り込みをしています。
リストから、任意のアイコンを選択しクリックします。

アイコン詳細ページの左上にある、アイコンマークをクリックし、コードをコピーします。

Adobeのデザインソフトでアイコンフォントを使用する

Adobeのデザインソフトを開きます。今回はXDでフォントを利用します。
テキストツールを選択します。

編集エリアに「ctr」+「v」でペーストします。
この段階ではまだ、fontawesomeのフォントが適用されていないため、「?」のままになっています。

テキストツールのフォントエリアに「Font Awesome 5 Free」が表示され選択できるようになっています。
さらに「Solid」を選択すると、任意のアイコンが表示されます。

アイコンのフォントコードをコピー&ペーストをする前に、テキストのフォントを「Font Awesome 5 Free」で選択(切り替え)しておくと、ペーストした時に、任意のアイコンマークで表示されます。

Font Awesome 5 Freeのアイコンリストのチートシートでもっと便利に

また、Font Awesome 5 Freeのアイコンリストのチートシートもあります。
詳細ページを表示せずに、その場でアイコンデータをコピーできます。

リストのアイコンの上で右クリックをし「コピー」します。

デザインエディター(画像はXD)で、フォントを「Font Awesome」に切り替え、「ペースト(貼り付け)」します。

使い方は、アイコン詳細ページからのコピー&ペーストと基本一緒です。

一覧リストから直接コードをコピーできるので、作業が更に楽になります。

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