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

tomomi–web制作, ヒント–

※当サイトはアフィリエイト広告を利用しています

   

この記事は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種類以上あるので、使いたいアイコンを探すのは少し大変だけど楽しいですよ♪