rcmdnk's blog
Last update

Font Awesome は様々なアイコンをWebフォントとして表示出来る様にするプロジェクトです。

FacebookTwitter 等もあり、これらをブログ等で使っているのも最近良く見ます。

そこで、このブログでもFont Awesomeを導入してみました。

Sponsored Links

インストール

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: [email protected]

取り敢えず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-flagfaクラス追加+プレフィックスを変える必要があって、 上の文章中でも変更してあります。

Font Awesomeをアップデート

追記ここまで

Sponsored Links
Sponsored Links

« Octopressへ絵文字の導入 Octopressでのコードの表示やコメントのあれこれ »