手軽で便利!アイコンフォント「Font Awesome」をPhotoshopで使う方法

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年1月24日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

「Font Awesome」は、フリーで使えるアイコンフォントです。
2017年1月現在、なんと675種類もの優れたデザインのアイコンを手軽に使うことができ、私も大変重宝しています。
→ Font Awesome, the iconic font and CSS toolkit

主な使い方としては、CSSファイルをサーバーにアップロードしてhtmlに書き込んで表示する、という方法です。
でも、こんなにたくさんのアイコン、フォントとして使うだけではなく図形として使いたいですよね!

なんと、「Font Awesome」は『フォント』なので、他のフォントと同じようにパソコンにインストールすることができるんです。
インストールできれば、Photoshopでも簡単に呼び出すことができます。
今日はその方法をご紹介します。
 

インストール

  1. まず、Font Awesomeのサイトにアクセスし、「Download」をクリックします
    170124fontawesome02
     
  2. 今回はフォントのダウンロードだけしたいので、下のボタンをクリックします
    170124fontawesome03
     
  3. ダウンロードが完了したら、zipフォルダを解凍して「fonts」フォルダを開きます
    170124fontawesome04
     
  4. 「FontAwesome.otf」をダブルクリックすると、フォントのインストールが開始されます
    170124fontawesome05
     

Photoshopで使う

  1. まず、使いたいアイコンをFont Awesomeのサイトの「cheatsheet」からコピーします。
    この時、ユニコードやアイコン名ではなく、アイコンそのものをコピーしてください
    170124fontawesome07

    170124fontawesome08
     
  2. Photoshopを開いたら、コピーしたアイコンをそのままペーストします。
    すると変なマークが出てますが、気にせずに…
    170124fontawesome09
     
  3. フォントの種類で「Font Awesome」を選択すると…
    170124fontawesome10
     
  4. 先程コピーしたアイコンが現れます!
    170124fontawesome11
     
  5. あとは、大きさや位置を調整して、完成!
    170124fontawesome12
     

写真と組み合わせれば、あっという間にそれっぽいアイキャッチ画像ができました。
バナーなどを作るときにも役立ちそうです。

なにしろ600種類以上あるので、使いたいアイコンを探すのは少し大変だけど楽しいですよ♪