Bootstrapにも使えるアイコン「Font Awesome」の使い方

Font Awesome

Font Awesome

便利に使えるBootstrapですが、

元々用意されている標準アイコンでは

使いたいものがない場合に

「Font Awesome」というものを使うと

アイコンが増やせます。

スポンサードリンク

Font Awesome

Font Awesome

Font AwesomeはWebフォントなので、

CSSで色を変えたり、大きさを変えたりできます。

アイコンの数は369個あります。
※記事執筆時点

Font Awesomeアイコン一覧

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を使わなくても

簡単にアイコンがつかえるので便利ですね~

その他のアイコン増やすもの

他にも、アイコンを増やすものがあります。

Ligature Symbols

こちらは、まだ使った事がないので紹介のみです。

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ