『FontAwesome』でBootstrapで使えるアイコンを増やす

2013/11/22 | デザイン ,

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

まえがき

今回は『Font Awesome』を使ってBootstrapで使えるアイコンを増やしてみようとおもいます。

TwitterやFacebookのアイコンから他のも色々アイコンの種類を簡単にふやすことができるのでかなり重宝しそうであります。

自分はBootstrap2系と3系両方で試してみましたが、いちよう両方で動作確認できました。

今回利用したFontAwesomeはVersion4.0.3です。

公式ページはこちら↓

http://fortawesome.github.io/Font-Awesome/

http://fortawesome.github.io/Font-Awesome/

導入方法

外部サイトリンクで簡単に導入

Bootstrapを読み込んでいるHTMLで以下の1行を追加すればとりあえず導入はできます。

<!-- font awesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

ダウンロードしてきて導入

外部サイトリンクだと色々困りそうなので、使うと決めた以上はダンロードしてきて利用するほうがいいでしょう。

公式ページからダウンロード後、『css/』『font/』の中のファイルをBootstrapのcss、fontのおいてある場所においておく。

っでこんな感じでCSSを読み込んであげる。

<!-- font awesome -->
<link href="./css/font-awesome.css" rel="stylesheet">

使ってみる

では、実際につかってみようとおもいます。

FontAwesomeでは『.fa 』『.fa-****』といったクラスを追加してあげればいいです。

例えばTwitterのアイコンを使う場合だとだと『class=”fa fa-twitter”』となります。以下、サンプルソース。

<!-- twitter-icon -->
<button type="button" class="btn btn-default btn-lg">
  <i class="fa fa-twitter"></i>
</button>

<!-- facebook-icon -->
<button type="button" class="btn btn-default btn-lg">
  <i class="fa fa-facebook"></i>
</button>

<!-- 標準のアイコンも問題なく使えます -->
<button type="button" class="btn btn-default btn-lg">
  <i class="glyphicon glyphicon-star"></i>
</button>

こんな感じでアイコンがでてきました!!

fontawesome-1

おすすめ書籍

はじめてのBootstrap (I・O BOOKS)
槙 俊明
工学社
売り上げランキング: 22,035
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
ワークス アルディート
エムディエヌコーポレーション
売り上げランキング: 9,172

2013/11/22 | デザイン ,

関連記事

CSSBeautifyをコマンドラインで使ってCSSを綺麗にする。

まえがき CSSを整形するためのWEBツール『CSSBeautify』...

記事を読む

Screeny Shot 2013-05-26 19.03.18.png

railsでFlatUIを使ってみるの巻

  まえがき 話題のcssテーマ「FlatUI」を使いたく、どうせなら...

記事を読む

uglifycss-1uglifycss-1.png

UglifyCSSで簡単にCSS圧縮してみる。おまけつき

まえがき CSSファイルの改行だったりスペースだったり、不必要なセミコ...

記事を読む

Rails×Twitter×Bootstrapで作る即席WEBサービス

  まえがき ・アプリケーションフレームワークとしてのRuby o...

記事を読む

CSScomb-sublime-1CSScomb-vim-1.png

【Vim・Sublime】cssのプロパティの順序を整形するプラグイン【CSScomb】

まえがき Cssのプロパティを自動で順序整形してくれるツール『CSSc...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑