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

Font Awesome

Font Awesome

便利に使えるBootstrapですが、

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

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

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

アイコンが増やせます。

スポンサードリンク

Font Awesome

Screenshot of fortawesome.github.io

Font Awesome

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

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

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

Screenshot of fortawesome.github.io

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

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

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

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

Screenshot of kudakurage.com

Ligature Symbols

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

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ