2014.05.03
css

CSSだけで作られた369個のアイコン 使い方も簡単!

CSSだけで作られたアイコンが好きなだけ使える、Font Awesomeという大変すばらしいサイトを紹介します。
GPLライセンスなので商用利用もOKです。
web_screenshot063
使えるアイコンの一覧はこちら

ダウンロードしても使えるし、オンラインでそのままリンクを付けても使える優れものです。
また、フォントもダウンロードして使えるのでアイコン自体がベクター素材にもなってしまうのです。

では使い方です。

1.HTMLのheadに記述する

1番簡単な方法

ダウンロードせずにオンラインサービス(CDN)で使用する方法です。
<head>に以下を記述。

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

もう1つの方法

ソースファイルをダウンロードして使用する方法です。
こちらからダウンロードし、解凍します。
font-awesomeというフォルダごと、使用するHTMLファイルなどがある場所にFTPなどでアップロードします。
そして<head>に以下を記述。

<link rel="stylesheet" href="ファイルのパス/font-awesome/css/font-awesome.min.css">

2. 任意の場所にアイコンを表示する

<i>タグを使ってHTML内のアイコンを表示したい場所に以下のように記述します。
faというクラスは必ず付ける必要があります。

<i class="fa fa-camera-retro"></i>
ブラウザ表示例 

上記のfa-camera-retroの部分をこちらの一覧から好きなアイコンを選んで変更するだけです。

ブラウザ表示例 
その他こんな風にいろんなアイコンを表示できます。
                       

3.その他のオプション

アイコンの大きさを変更

fa-lg (33% 拡大), fa-2x, fa-3x, fa-4x, fa-5xというクラスが用意されているので追加するだけです。

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
ブラウザ表示例

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

fa-camera-retro

Attention!!
もしアイコンが切れてしまう場合は、line-heightを調整してみてください。

アイコンの幅を統一

fa-fwというクラスを付けるとアイコンの幅がfixedされます。それぞれアイコンの幅が違うのですが、それが統一されるようです。

<ul class="nav nav-pills nav-stacked">
  <li><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

fa-fwというクラスを付けないと…

<ul class="nav nav-pills nav-stacked">
  <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-book"></i> Library</a></li>
  <li><a href="#"><i class="fa fa-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="fa fa-cogs"></i> Settings</a></li>
</ul>

ちょっと分かりにくいですが、良く見るとアイコンの大きさが微妙に違うので文字の開始位置がずれてしまっていますね。
ちなみに上記のCSSは以下のように設定しています。

CSSソース

.nav>li {
position:relative;
display:block;
}
.nav>li>a {
position:relative;
display:block;
padding:5px 10px;
background-color:#eee;
margin:2px;
text-decoration:none;
}
.nav>li>a:hover,.nav>li>a:focus {
text-decoration:none;
background-color:#1d9d74;
color:#fff;
}
.nav-pills>li>a {
border-radius:5px
}
.nav-stacked>li {
float:none
}

リスト表示のアイコンにも

<ul>に fa-ulというクラスを付け、 <li>に fa-liというクラスを付けてアイコンを指定するとリスト部分のアイコンになります。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>リストのアイコン</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>アイコンを自由に変えられる</li>
  <li><i class="fa-li fa fa-square"></i>普通の四角のアイコンも</li>
</ul>
ブラウザ表示例

  • リストのアイコン
  • アイコンを自由に変えられる
  • 普通の四角のアイコンも
Attention!!
もしアイコンがずれてしまう場合は、line-heightを調整してみてください。

アイコンにボーダーを付けたり、引用文のように両サイドにアイコンを付ける

ボーダーを付ける場合にはfa-borderというクラスを追加。
左サイドにアイコンを持ってくる場合は、pull-left、右サイドにアイコンの場合はpull-rightというクラスを追加。

<i class="fa fa-quote-left fa-2x pull-left fa-border"></i><i class="fa fa-quote-right fa-2x pull-right fa-border"></i>
同時にいくつかのクラスを指定することでこんな風に引用文っぽくなります。アイコンにボーダーをつけて拡大しています。
ブラウザ表示例
同時にいくつかのクラスを指定することでこんな風に引用文っぽくなります。アイコンにボーダーをつけて拡大しています。

アイコンをアニメーションで回転させる

fa-spinというクラスを追加するとアイコンが回転します。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
ブラウザ表示例
Attention!!
IE8とIE9ではCSS3アニメーションがサポートされていません。

アイコンを回転、反転表示

fa-rotate-角度で指定した角度を回転させて表示、fa-flip-horizontalで水平方向へ反転、fa-flip-verticalで垂直方向へ反転。

<i class="fa fa-shield"></i> 通常<br>
<i class="fa fa-shield fa-rotate-90"></i> 90度回転<br>
<i class="fa fa-shield fa-rotate-180"></i> 180度回転<br>
<i class="fa fa-shield fa-rotate-270"></i> 270度回転<br>
<i class="fa fa-shield fa-flip-horizontal"></i> 水平方向に反転<br>
<i class="fa fa-shield fa-flip-vertical"></i> 垂直方向に反転
ブラウザ表示例
  normal
  90度回転
  180度回転
  270度回転
  水平方向に反転
  垂直方向に反転

2つのアイコンを重ねて表示

fa-stackというクラスを親要素に追加し、その子要素にfa-stack-1xというクラスは通常サイズのアイコン、fa-stack-2xというクラスは大きいサイズのアイコンとして、重ねて表示ができる。
fa-inverseというクラスは色がついた部分と付いていない部分を反転できる。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
ブラウザ表示例
fa-square-oの上にfa-twitter
fa-circleの上にfa-flag
fa-cameraの上にfa-ban

4.アイコンをベクター素材として使う

こちらからダウンロードすると、Fontsというフォルダの中に、FontAwesome.otfがあるので使用しているPCにフォントをインストールします。
そしてこちらの一覧に表示されているアイコンそのものをコピーしてイラレやフォトショなどのデザインに張り付けるだけです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP