Font Awesomeとは?
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
と公式サイトで説明されてました。
cssでカスタマイズが可能なベクタ形式(Illustratorなどで導入されていて、情報をベクトルで扱ってるので画像の劣化の心配がないらしいです。)のアイコンを使えるらしいっす。
導入方法として、
の2つの方法が一般的のようです。
CDNは、サーバーにあるものをネットワーク経由で使っているので、ネット環境がないと使えません。
CDN 【 Contents Delivery Network 】 コンテンツデリバリネットワーク
CDNとは、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと。CDNを構築・運用し、企業などに有料で利用させるサービスをコンテンツデリバリサービス(CDS)という。
Font Awesomeを使うための環境を準備
Font Awesomeの『Get Started』のページに行きます。
CDNを利用する場合は、
『EASIEST: BootstrapCDN by MaxCDN』のソースをコピペして、<head>タグ内に貼り付けます。
(※font-awesome/4.5.0の数字の部分がバージョンなので、ここの数字により、扱えるアイコンが変わってくるようです。また、ローカル環境では、http:を省略しないようにしたほうが良いようです。https:で動かない場合は、http:で試してみるのも良いようです。)
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
CSSファイルをダウンロードして利用する場合は、
『Home』の『Download』をクリックします。
以下のようなダイアログが表示されます。
『No thanks,just download Font Awesome』を選択します。
ダウンロードされたフォルダ(font-awesome-4.5.0.zip)の構成は、
必要なのは、『font-awesome.min.css』ファイルと『fonts』フォルダです。
(※『font-awesome.min.css』ファイルと『fonts』フォルダの位置関係(相対パス)が変わらないようにする必要があります。)
『Get Started』のページの『EASY: Default CSS』の手順を実行します。
下記のような構造で、cssフォルダを作成し、その中にfont-awesome.min.cssファイルを入れていて、
font-awesome.min.cssファイルを読み込む場合
<link rel="stylesheet" href="css/font-awesome.min.css">
を<head>タグ内に貼り付けます。
Font Awesomeを表示させてみる
Font Awesomeを表示させる方法は、
- htmlタグ
- cssの『:before』、『:after』要素で記述
の2パターンあるようです。
どちらの方法を使っても、cssで自由に色を変えたり、大きさを変えたりできます。
まずは、『Icons』のページに行きます。
使いたいアイコンをクリックします。
選択したアイコンのページが表示されます。
htmlタグで表示させる場合
表示されたアイコンページの下部にある<i>タグをコピペして、表示させたい場所に貼り付けます。
<i class="fa fa-shopping-cart"></i>
cssの:before、:after要素で表示させる場合
『Unicode:〇〇』の〇〇の部分を使います。ここでは、『f07a』
仮に、
<li class="shopping"><a href="">ショッピングカート</a></li>
のようなhtmlタグが組んであった場合、
cssで
li.shopping a:before { font-family: 'FontAwesome'; content: '\f07a' }
とすると表示されます。
⇩ FontAwesomeについて詳しくは下記サイトへ
FontAwesomeをIllustratorやPhotoshopなどAdobe系ソフトで使う方法
Adobe系ソフトは、フォントファイルおよび拡張子が「*.mmm」「*.pfb」「*.ttf」「*.fon」になっているものを読み込むそうです。
ダウンロードした『font-awesome-4.5.0.zip』の中の『fonts』フォルダの中に、『fontawesome.ttf』というファイルがあるので、そのファイルを移動します。
(※windows7で試してます。)
C:¥Program Files(x86)¥Common Files¥Adobe¥Fonts
(※Fontsフォルダがない場合は作成します。)
に、『fontawesome.ttf』を移動します。
⇩ 詳しくは下記サイトへ。
・【Adobe Illustrator】フォントの追加 at softelメモ
・Illustrator が扱うフォントとフォントの数について
FontAwesome側
FontAwesomeの『Icons』のページの『cheatsheet』をクリックします。
『Cheatsheet』のページが表示されます。
使いたいアイコンを選択してコピーします。普通に『Ctrl+C』でコピーできます。
⇩ よく使うアイコンの探し方について詳しくは下記サイトへ
・良くあるメニュー・アイキャッチのアイコンに使えそうなFontAwesomeのまとめ | Root-013
Adobe系ソフト(例:Illustrator)側
『新規ファイル』作成したら、『Ctrl+V』で貼り付けます。文字が対応してないとなるので、選択された状態のまま『書式(T)』>『フォント(F)』>『<FontAwesome>』を選択します。
無事、アイコンが表示されました。
Font Awesomeをwindows7で使う方法
パソコン自体にフォントをインストールすると、パソコンにインストールしてるソフトで、インストールしたフォントが使えるようになるようです。
(※Adobe系ソフトでもパソコン自体にインストールしたフォントが使えます。ただ、パソコンにフォントをインストールすると容量が取られるという問題があるようです。)
安全なファイルと分かってる場合は、フォントファイル自体をダブルクリックするか、フォントファイルを選択した状態で右クリックし、『インストール(I)』を選択すると下記ウィンドウが表示されるので、『インストール(I)』をクリックします。
今回は、『FontAwesome.otf』(主にOSにインストールして使うタイプのものだそうです。)ファイルを選択しました。
フォントが追加されたか確認するには、『スタート』>『コントロールパネル』を選択します。
『デスクトップのカスタマイズ』を選択します。
『フォント』を選択します。
パソコンにインストールされてるフォントの一覧が表示されるので、確認できます。
⇩ Windows7にフォントをインストールする場合
⇩ Windowsにフォントをインストールする方法、詳しくは下記サイトへ
⇩ Macなどにフォントをインストールする方法は下記サイトへ
・[Photoshop]アイコンフォントをphotoshopやillustraterで簡単に使う方法。特に、Font Awesomeはチートシートが用意されていてカナリ便利。
今回はこのへんで。