スポンサードリンク
便利に使えるBootstrapですが、
元々用意されている標準アイコンでは
使いたいものがない場合に
「Font Awesome」というものを使うと
アイコンが増やせます。
スポンサードリンク
Font Awesome
Font AwesomeはWebフォントなので、
CSSで色を変えたり、大きさを変えたりできます。
アイコンの数は369個あります。
※記事執筆時点
Font Awesomeの読み込み
スポンサードリンク
本家サイトからCSSを読み込む
一番簡単なのはheadタグにCSSのリンクを張るだけです。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
これが一番簡単な方法です。
ダウンロードしてサイト内で読み込む
ファイルをダウンロードして読み込む方法もあります。
サイトの赤枠からファイルをダウンロードします。
ダウンロードした圧縮ファイルを解凍すると以下のようになってます。
使用するのは
CSSフォルダ内の「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダです。
サイトへのファイルの置き方は
解凍後のフォルダ構成と同じようにしてください。
|-css
| |-font-awesome.min.css
|
|-font
※もし構成が変わる場合はCSSファイルでのfontフォルダのパスを変えて下さい
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
・・・
以下略
後はheadタグ内でcssを読み込むだけです。
(例)
<link rel="stylesheet" href="css/font-awesome.min.css">
Bootstarapと併用する場合
<link rel="stylesheet" href="css/bootstrap.min.css">
BootstrapのCSSを読み込んだ後にFont Awesomeを読み込みます。
(例)
<link rel="stylesheet" href="css/bootstrap.min.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Font Awesomeの使い方
あとはBootstrapのアイコンの使い方と同じです。
(例)
<i class="fa fa-camera-retro"></i> fa-camera-retro
クラス名に「fa」を入れないと表示されないので
「fa」を忘れないように注意が必要です。
最初「fa」を忘れてて表示されなかったので焦りました。
Bootstrapを使わなくても
簡単にアイコンがつかえるので便利ですね～
スポンサードリンク
その他のアイコン増やすもの
他にも、アイコンを増やすものがあります。
こちらは、まだ使った事がないので紹介のみです。
スポンサードリンク
