2014/12

08

簡単に使えるアイコンフォント「FontAwesome」を使ってみる!

ブログやホームページなどでアイコンフォントを簡単に使える「Font Awesome」の紹介。ダウンロードして使用する方法とCDNで使用する方法がありますが、より簡単に使えるCDNでの使い方を簡潔にまとめました。
1

アイコンフォント「FontAwesome」とは?

アイコンフォントはWebフォントのアイコン版で、フォント同様にサイズ・色変更をCSSで調整できレスポンシブ全盛の今、当たり前に使用するようになりました。 アイコンフォントを提供するサイトは多くありますがFontAwesomeはCDN(CSSをリンクするだけ)で使用できるので、簡単にアイコンフォントを使用することができます。

2

CSSのリンクを貼る

FontAwesomeが発行しているCSSをhead内にリンクを貼ります。2014年12月現在、最新のバージョンは4.2.0です。下記URLより最新のタグをコピペしてください。

html
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
3

「FontAwesome」の使用方法

アイコンリスト(Font Awesome Icons)から使用したいアイコンをクリックしてアイコン個別ページに記載されてるタグをコピーし、表示したい箇所にペーストするだけです。

html
<i class="fa fa-twitter"></i>

←これアイコンフォント

4

アイコンのサイズを変更する

FontAwesomeで用意されている独自のスタイルが色々とあります。アイコンのサイズを変更したい場合はclassにfa-lgfa-2xfa-3xfa-4xfa-5xを追加します。

html
<i class="fa fa-twitter fa-lg"></i> fa-lg
<i class="fa fa-twitter fa-2x"></i> fa-2x
<i class="fa fa-twitter fa-3x"></i> fa-3x
<i class="fa fa-twitter fa-4x"></i> fa-4x
<i class="fa fa-twitter fa-5x"></i> fa-5x
fa-lg fa-2x fa-3x fa-4x fa-5x
5

アイコンを回転させる

ローディングアニメーションで使えそうな回転するアイコンもclassにfa-spinを追加するだけで機能します。 ※IE8・IE9は非対応

html
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

←これアイコンフォント

6

アイコンを使ったメニュー

ナビゲーションメニューもアイコンを配置するだけで視覚的イメージが随分と変わります。

css
.icon02 ul{
	list-style:none;
    border:solid 1px #DDD;
    border-bottom:none;
    }
.icon02 li a{ 
	color:#666;
    display:block;
    border-bottom:solid 1px #DDD;
    padding:10px;
    -webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
    }
.icon02 li a:hover{
	background-color:#F2F2F2;
	}
html
<div class="icon02">
<ul>
<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-cog fa-fw"></i> Settings</a></li>
</ul>
</div>

通常はアイコンのサイズ変更くらいで十分だと思いますし、CSSの知識があればカスタマイズもできると思いますがFontAwesomeでの活用例が下記URLに載ってますのでご覧ください。

Advertisement

Advertisement

最新記事
Facebook