Font Awesomeを試してみる

会社の友達にFont Awesomeスゲーみたいなこと言われてなんじゃそりゃって感じだったので、
試してみました。なるこど、コレは楽しいし、重宝しそうでございます。

 
 
■ Font Awesomeって?
 
↓のようなマークアップで、

<i class="icon-thumbs-up icon-large"></i>
<i class="icon-thumbs-up icon-2x"></i>
<i class="icon-thumbs-up icon-3x"></i>
<i class="icon-thumbs-up icon-4x"></i>

↓のようなことが出来ちゃうアレです。




↓こんなFORMとかも出来ちゃったりして、デザインできないエンジニアにとってスゲーナイスな予感。。

 
導入も簡単でした。以下にまとめます。
 
 
■ モノを落としてくる
 
Font Awesomeに行くと↓のような画面が出てきます。

 
Download Font Awesome 3.0ってところからアーカイブ落として解凍します↓

 
 
■ Webサーバーに配置&設定
 
↓のEasy Bootstrap + Font Awesome Integrationを参考にしてやってみます。

 
FTPソフトでWebサーバーに↓のように、cssとfontディレクトリを配置してやります。
 
 
このブログはWordPressを使用していますが、
↓のような感じでcssを読み込ませます。

<link rel="stylesheet" href="<?php bloginfo('home'); ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php bloginfo('home'); ?>/css/font-awesome.min.css">

 
コレを↓のようにブラウザ上で出来たりして、その辺もWordPressはお手軽な感じです。

#小粋空間(http://www.koikikukan.com/)のテンプレートにお世話になってます。
 
んま、自分でダウンロードして上げなくてもCDN上にCSSがあるので
↓のサイトにいって
http://www.bootstrapcdn.com/#tab_fontawesome
↓のところをコピってきて使えばOKって話もあったりします。

 
 

いやー、なんかこれからブログ書くの楽しくなりそうですねw
WordPressのエディタ上で更に簡単に使えちゃうようなプラグインとか出てきたらアツいカモですね~
 

プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 1,885

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中