PIXEL LAB
いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。
公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。
以上です。
ここから下は、Font Awesomeの基本的な使い方などについて紹介します。
Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント(ウェブフォント)です。
無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの相性もバッチリです。
アイコンフォントは、フォント(アウトラインデータ)として提供されるので、画像アイコンとは違い、拡大してもスムースまま。iPhoneなどの高解像度ディスプレイでみても、非常に綺麗に表示されます。
CSSで色指定やサイズ指定やもできるほか、CSS3アニメーションも利用できるので、インタラクティブなコンテンツでも活躍します。
Font Awesomeは、IE7はサポートしていません。さすがに近年は、IE7は対象外の案件ばかりなので、問題ないと思いますが、IE7をどうしてもサポートする必要がある場合は、古いバージョン でサポートしているようです。
公式サイトの内容を参考に、基本的な使い方をまとめました。
下準備として、以下のコードをHTMLの<haed>内に貼り付けます。
<i>タグのclass属性に fa とfaからはじまるアイコン名 を指定します。
大きさや色を変更したい場合は、CSSのfont-sizeやcolorで指定します。
CSSのfont-sizeで大きさを指定しますが、Font Awesome自体にも大きさを指定するクラスが用意されています。アイコンのみ大きくしたい場合などに利用します。fa-lg (133%) ,fa-2x ,fa-3x ,fa-4x ,fa-5 を指定してください。
個々のアイコンの幅は、アイコンデザインによって違いますが、固定幅指定してやれば、個々のアイコンの幅を同じにすることができます。縦にアイコンが並ぶ場合などに、綺麗にラインが揃います、fa-fw と指定してください。
リストタグのブレットアイコンとして利用できます。fa-ul fa-li を指定してください。
アイコンを回転させることができます。どのアイコンでも指定できますが、基本的には、以下のアイコンの場合にきれいに回ります。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 と指定してください。
アイコンを複数重ねて、新しいアイコンをつくることができます。
fa-stack , fa-stack-1x , fa-stack-2x , fa-inverse などを指定します。
Font Awesomeは基本的にウェブサイト用ですが、Photoshopやillustrator、Fireworksといったデザインソフトでも利用することができます。
使用方法についてビデオにまとめましたので、参考にしてください。
なお、ベクターデータとして欲しい場合は、チーとシートのページをPDFで書き出し、illustratorで開いて使用することになります。
© 2007-2018 ピクセルイメージ