Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方

いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。
公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。

以上です。
ここから下は、Font Awesomeの基本的な使い方などについて紹介します。

Font Awesomeとは

Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント(ウェブフォント)です。
無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの相性もバッチリです。

アイコンフォントは、フォント(アウトラインデータ)として提供されるので、画像アイコンとは違い、拡大してもスムースまま。iPhoneなどの高解像度ディスプレイでみても、非常に綺麗に表示されます。
CSSで色指定やサイズ指定やもできるほか、CSS3アニメーションも利用できるので、インタラクティブなコンテンツでも活躍します。

Font Awesome

Font Awesomeは、IE7はサポートしていません。さすがに近年は、IE7は対象外の案件ばかりなので、問題ないと思いますが、IE7をどうしてもサポートする必要がある場合は、古いバージョン でサポートしているようです。

使い方

公式サイトの内容を参考に、基本的な使い方をまとめました。

導入(CDNを利用)

下準備として、以下のコードをHTMLの<haed>内に貼り付けます。

基本的な使い方

<i>タグのclass属性に fafaからはじまるアイコン名 を指定します。
大きさや色を変更したい場合は、CSSのfont-sizeやcolorで指定します。

fa-camera-retro

サイズ指定

CSSのfont-sizeで大きさを指定しますが、Font Awesome自体にも大きさを指定するクラスが用意されています。アイコンのみ大きくしたい場合などに利用します。fa-lg (133%) ,fa-2x ,fa-3x ,fa-4x ,fa-5 を指定してください。

fa-lg fa-2x fa-3x fa-4x fa-5x

固定幅で指定

個々のアイコンの幅は、アイコンデザインによって違いますが、固定幅指定してやれば、個々のアイコンの幅を同じにすることができます。縦にアイコンが並ぶ場合などに、綺麗にラインが揃います、fa-fw と指定してください。

  Home   Library   Applications   Settings

リストで使用

リストタグのブレットアイコンとして利用できます。fa-ul fa-li を指定してください。

  • List icons
  • can be used
  • as bullets
  • in lists

アニメーション

アイコンを回転させることができます。どのアイコンでも指定できますが、基本的には、以下のアイコンの場合にきれいに回ります。fa-spin ,fa-pulse と指定してください。

CSS3アニメーションなので、IE8-IE9は動きません。

回転・反転

アイコンを90,180,270度回転させたり、縦反転、横反転することができます。
fa-rotate-90 , fa-rotate-180 , fa-rotate-270 , fa-flip-horizonta , fa-flip-vertical と指定してください。

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

重ねて使用

アイコンを複数重ねて、新しいアイコンをつくることができます。
fa-stack , fa-stack-1x , fa-stack-2x , fa-inverse などを指定します。

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

おまけ。Photoshopなどのデザインソフトで使う方法

Font Awesomeは基本的にウェブサイト用ですが、Photoshopやillustrator、Fireworksといったデザインソフトでも利用することができます。

使用方法についてビデオにまとめましたので、参考にしてください。
なお、ベクターデータとして欲しい場合は、チーとシートのページをPDFで書き出し、illustratorで開いて使用することになります。

Font Awesome
Font Awesome チートシート

エントリー一覧

ソーシャル

About This Site

HTML、CSS、Javascript、デザイン、3D、モバイルアプリ、CMSなど、ウェブ制作関連の話題を扱うブログです。Fireworksのオリジナル拡張機能の配布や、デザインリソースの配布、オリジナルツールの公開も行っています。

About Me


大阪在住フリーのウェブデザイナーの、ピクセルイメージ田中です。長年、ウェブサイト構築のお手伝いを行っており、デザインやプログラムを中心に、Flash全盛期につちかったモーショングラフィクスのセンスを生かした動画作成や、サイト構築に便利なCMSの開発も行っています。

JS CMS -- DBレス・簡単導入・無料のWebサイト構築用オープンソースCMS
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...