Font Awesomeのアイコンをphotoshopで利用する方法

Font-Awesomeを組み込んだWebサイトをデザインする際に、Photoshop上でもFont-Awesomeを利用できたら便利ですよね。

psdファイルやベクターデータがないかなーと思っていたのですが、検索したところもっと簡単に利用する方法があるようです。

Font-Awesomeはフォントなので、自分のPCにインストールしてしまえばPhotoshopでもIllustratorでも普通に出てくるようになります!

利用方法

  1. http://fortawesome.github.io/Font-Awesome/のダウンロードボタンからファイル一式をダウンロードします。
  2. ダウンロードしたファイルを解凍して、展開されたフォルダから「fonts」フォルダを開きます。
  3. その中の「FontAwesome.otf」をダブルクリックするとフォントインストール画面が開きますのでインストールします。
  4. 利用したいフォントを公式チートシートからコピーします。
  5. Photoshopを起動してテキスト入力画面でペーストして、フォントを「FontAwesome Regular」にします。
  6. 以上でFont-Awesomeのアイコンを自由に利用できます。

参考:アイコンフォントをphotoshopやillustraterで簡単に使う方法。特に、Font Awesomeはチートシートが用意されていてカナリ便利。