Font Awesomeの使い方、画像で優しく解説【Mac・Illustrator編】

Font Awesomeの使い方、画像で優しく解説【Mac・Illustrator編】

Illustratorで、Font Awesomeバージョン5のアイコンを読み込んで表示する方法を解説します。

無料ですし、会員登録も不要です。

ちなみに、有料プランにすると利用できるアイコンが増えます。

目次

Font Awesomeの使い方【ダウンロードする】

パート1 Font Awesomeのサイトへアクセス

https://fontawesome.com/からFont Awesomeのサイトへアクセスしましょう。

下の画像のような画面になったら、赤枠の部分(Start for Free)をクッリクします。

FontAwesomeのサイト画像

 

パート2

下のような画面に切り替わりますので、赤枠の「Desktop」をクリックします。

FontAwesomeのサイト画像

 

パート3

下のような画面に切り替わりますので、赤枠の部分をクリックして、zipファイルをダウンロードします。

FontAwesomeのサイト画像

パート4

パート3でダウンロードしたzipファイルを解凍(展開)します。

そのファイルを開くと、以下のフォルダがありますので、赤枠で囲まれた「otfs」をクリックします。

FontAwesomeでダウンロードしたファイル

パート5

赤枠で囲まれた箇所を、1つずつクリックします。

そうすると、1回クリックするたびに、パート6のような画面に切り替わります。

FontAwesomeでダウンロードしたファイル

パート6

赤枠の「フォントをインストール」をクリックします。

これでIllustratorで、Font Awesomeのアイコンを使用する準備が終了です。

FontAwesomeのフォントをインストール画像

Font Awesomeの使い方【シートからコピペするだけ】

https://fontawesome.com/cheatsheet/free/solidから、FontAwesomeのアイコン選択ページにアクセスします。

赤枠で囲まれた箇所をクリックすると、さまざまな種類のアイコンを確認できます。

アイコンを選択する際は、青い枠で囲まれた部分をクリックして選択し、コピーをします。

FontAwesomeでアイコンを選択する画面

Illustratorに貼り付ける

Illustratorのアートボードに、さきほどコピーしたもの貼り付けます。

そうすると、以下のように文字化けします。

FontAwesomeのアイコンをコピペしたときに文字化けしている画像

Illustratorでフォントを変更する

以下のように、Illustratorでフォントの指定を変更すれば、文字化けが修正されます。

これで、アイコンが使えるようになりましたね!

IllustratorでFontAwesomeのフォントを選択する方法

 

  • URLをコピーしました!

この記事を書いた人

■EC運営のノウハウとインターンでの学びを発信|経営者を目指すための社会人インターンに参加中(EC事業)|個人で平均月商40万円のECサイトを運営|デイトラ生です|Shopifyが好き

コメント

コメントする

目次