Font Awesome は様々なアイコンをWebフォントとして表示出来る様にするプロジェクトです。
Facebookや Twitter 等もあり、これらをブログ等で使っているのも最近良く見ます。
そこで、このブログでもFont Awesomeを導入してみました。
インストール
Font Awesome からFont Awesomeをダウンロードしてきます(現在v3.0.2)。
ダウンロードしたzipファイルを解凍して、
まずは中にある
sass/font-awesome.scss
をoctopressのフォルダのsass/custom/_font-awesome.scssと
名前を変更してコピーします。
追記: 2013/5/11
versionが3.1.0からSASSサポートが外れたとのこと。
Ref: FortAwesome@GitHub
取り敢えずcss/font-awesome.cssをそのまま
sass/custom/_font-awesome.scssへコピーして代用してます。
追記ここまで
次にoctopress内でsource/fontディレクトリを作りzipを解答したディレクトリ内の
font/fontawesome-*を全てoctopressのsource/fontへコピーします。
最後にsass/screen.scssへ
@import "custom/font-awesome";
の1行を加えて下さい。
以上でインストール完了です。
使い方
使い方は
旗を表示します:<i class="fa fa-flag"></i>
の様に<i>タグで囲い、classにアイコン名を指定してあげれば
旗を表示します:
この様に表示されます。
Font Awesome のページに色々な使い方あるので参考にして下さい。
このページの最初の旗は
<i class="fa fa-flag fa-4x pull-left"></i>
として書いています。
追記: 2014/01/04
Font AwesomeをVersion4にアップデートしたので、
これまでのicon-flagの様なクラスから
fa fa-flagとfaクラス追加+プレフィックスを変える必要があって、
上の文章中でも変更してあります。
追記ここまで