● illustratorでFont Awesomeを使用する（Macの場合）

● 1. ダウンロードページからFont Awesomeをダウンロードする

・Font Awesome バージョン5 のダウンロード

https://fontawesome.com/download

Free for Desktop をクリックしてダウンロードします。  
ダウンロードが完了したらダブルクリックして解凍しておきます。  
fontawesome-free-5.9.0-desktop　 のようなフォルダが生成されます。    

・Font Awesome バージョン4 のダウンロード

https://fontawesome.com/v4.7.0/

Download & Customize　から Download ボタンを押します

● 2. Font Book.app を起動し「フォントを追加」から 先ほどダウンロードして解凍したフォルダを選択する

フォルダを選択すると自動的にフォントがインストールされます

● 3. フォント検索サイトからフォントコードをコピーする

https://glyphsearch.com/
こちらのサイトへ移動し、「Library → FontAwesome」 「 Copy → Unicode」を選択した状態でフォントをクリックすると自動的にコードがコピーされますので、それをテキストレイヤーヘペーストします。
文字化けしているような文字がコピーされてきますがそれでOKです。書体変更後にアイコンが表示されます。

● 4. Illustratorで 書体をFont Awesome 5 Free に選択する

これで文字化けしていた文字がアイコンに変わります。

● ホームページでFont Awesomeを使用する

http://fortawesome.github.io/Font-Awesome/

■ 使い方

1. 「Font Awesome」のページから【Download】ボタンを押してダウンロード
2. 解答してできたディレクトリの中から【css】【fonts】をサーバにコピー
3. HTMLに以下を追加

   <link rel="stylesheet" href="./css/font-awesome.min.css">
   

4. フォントの表示は以下のようにします。

   <i class="fa fa-cc-visa"></i>
   

■ アイコン一覧（アイコンをクリックすると貼り付け HTMLソースが見れます）

http://fortawesome.github.io/Font-Awesome/icons/

■ アニメーションさせることもできます（Font Awesome Animation）

http://l-lin.github.io/font-awesome-animation/

● Illustratorなどで Font Awesome のアイコンフォントを使用する

次の手順でできます。

1. フォントファイルを使用しているMacやWindowsにインストールする

フォントファイル
「font-awesome-4.4.0 > fonts > FontAwesome.otf」
をインストールします。

2. Illustratorの文字ツールで 「FontAwesome」を選択する

3. フォント検索サイトからフォントコードをコピーする

https://glyphsearch.com/
こちらのサイトへ移動し、「Library → FontAwesome」 「 Copy → Unicode」を選択した状態でフォントをクリックすると自動的にコードがコピーされますので、それをテキストレイヤーヘペーストします。
文字化けしているような文字がコピーされてきますがそれでOKです。書体変更後にアイコンが表示されます。

例■

メールアイコン を使用する場合は

1. http://fortawesome.github.io/Font-Awesome/cheatsheet/ 画面から
   fa-envelope-o [] を探す
2. ↑メールアイコン自体をコピー
3. Illustratorの文字ツールでペースト
4. 文字ツールでフォントを「Font-Awesome」に変更する。

よく使うアイコン : http://goo.gl/jTvmYC
参考 : http://goo.gl/Lhmm6P