FontAwesome CDN版v4を使う

Font Awesome v.4 のアイコンを使うには

よく使うアイコン一覧はこちら

CDN


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css">

表示させる方法

「HTMLページ内に直接記述する」方法と「CSSに記述する」方法がある。

① HTMLページ内に直接記述する

表示したい場所に記述する（ i タグは任意で span とかでもオケ）

Apple


<i class="fa fa-apple fa-2x" aria-hidden="true"></i> Apple   /*文字サイズfa-2x（2倍）の影響を受けない*/
<i class="fa fa-apple fa-2x" aria-hidden="true">Apple</i>  /*文字サイズfa-2x（2倍）の影響を受ける*/

アイコンに用意された主なクラス


	.fa-2x				…アイコンの大きさ(2倍) 	.fa-1g (1.333…倍), .fa-3x , .fa-4x , .fa-5x …その他のサイズはCSSで変更
	.fa-li				…リストマークとして表示する（↓サンプル有）
	.fa-fw				…等幅表示にする 
	.fa-spin			…アイコンを回転させる
	.fa-rotate-90		…アイコンの表示角度を変える(90度)	.fa-rotate-180 (180度) , .fa-rotate-270
	.fa-flip-horizontal	…水平方向に反転
	.fa-flip-vertical	…垂直方向に反転
	.fa-border			…アイコンの周囲に枠ができる
	.fa-stack			…アイコンを重ねることができる（↓サンプル有）

② CSSに記述する

林檎


<p><span class="ringo">林檎</span></p>


	.ringo {
		font-size:2em;
		}
	.ringo:before { /*テキストの後にアイコンを付けるときは :after */
		content:'\f179'; /*使いたいアイコンのUNICODEを記述*/
		font-family:fontawesome;
		font-size:1.2em;
		color:#c00;
		}

アイコンに色を付ける

Twitter

Map


<i class="fa fa-twitter fa-2x" aria-hidden="true"></i> Twitter
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i> Map

	.fa-twitter:before {
		color: #0174C8;
		}
	.fa-map-marker:before {
		color: #c00;
		}

aria-hidden="true" … 後述

サンプル

リストマークとしてのアイコン

  • ホーム
  • スケジュール
  • 設定
  • コンテンツ

<ul class="fa-ul">
	<li><i class="fa fa-home fa-li fa-fw" aria-hidden="true"></i>ホーム</li>
	<li><i class="fa fa-calendar fa-li fa-fw" aria-hidden="true"></i>スケジュール</li>
	<li><i class="fa fa-cogs fa-li fa-fw" aria-hidden="true"></i>設定</li>
	<li><i class="fa fa-check-square-o fa-li fa-fw" aria-hidden="true"></i>コンテンツ</li>
</ul>

スクリーンリーダー対応 aria-hidden

装飾のためだけにアイコンを使用する場合は、スクリーンリーダーに対して隠す。


<!--属性にaria-hidden="true" を追加する-->
<i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i><input type="text" placeholder=" Email address /">
<i class="fa fa-key fa-fw" aria-hidden="true"></i><input type="password" placeholder=" Password /">

アイコンに意味がある場合、スクリーンリーダーに認識させる2つの方法

password 


<!--aria-label属性でアイコンの意味を記述-->
<i class="fa fa-envelope-o fa-fw" aria-label="Email address"></i><input type="text" />

<!--"sr-only"クラスで代替テキストをスクリーンリーダーに読ませる-->
<i class="fa fa-key fa-fw" aria-hidden="true"></i><span class="sr-only">password</span><input type="password" />

Time to destination by car: 4 minutes
Time to destination by bike: 12 minutes
Battery level 50% 


<i class="fa fa-car fa-2x" aria-hidden="true"></i><span class="sr-only">Time to destination by car:</span> 4 minutes
<i class="fa fa-bicycle fa-2x" aria-hidden="true"></i><span class="sr-only">Time to destination by bike:</span> 12 minutes
<i class="fa fa-battery-half" aria-hidden="true"></i> <span class="sr-only">Battery level </span> 50%

効果を付加するBootstrap


<!--Bootstrap、fontawesomeのCSSを読み込む-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--jQuery（すでに設置済ならダブらないように！）、Bootstrap.js のCDNを読み込む-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

組み合わせて使う fa-stack

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera 


<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

<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-square fa-stack-2x"></i>
	<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span> fa-terminal on fa-square<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" style="color: Tomato"></i>
</span> fa-ban on fa-camera

Bootstrapを利用したボタン

Delete btn-danger = 赤系ボタン

Settings btn-default = 白系ボタン、btn-sm = ボタンの大きさ（small）

Font Awesome btn-success = 緑系ボタン、btn-lg = ボタンの大きさ（large） 



<!--"btn" → ボタンの設定が適用される-->
<a class="btn btn-danger" href="#"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"><i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
<a class="btn btn-success btn-lg" href="#"><i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome</a>

<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
	<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
	<i class="fa fa-cog" aria-hidden="true"></i>
</a>

<a class="btn btn-primary" href="#" aria-label="Skip to main navigation">
	<i class="fa fa-bars" aria-hidden="true"></i>
</a>

<div class="btn-group">
	<a class="btn btn-default" href="#"><i class="fa fa-align-left" title="Align Left"></i></a>
	<a class="btn btn-default" href="#"><i class="fa fa-align-center" title="Align Center"></i></a>
	<a class="btn btn-default" href="#"><i class="fa fa-align-right" title="Align Right"></i></a>
	<a class="btn btn-default" href="#"><i class="fa fa-align-justify" title="Align Justify"></i></a>
</div>



<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View your shopping cart">
	<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
</a>
User 

<div class="btn-group open">
	<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
	<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
		<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
		<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
		<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
	</ul>
</div>

font-awesome.cssで当たっているスタイル

※ font-awesome.css を読み込んでいればあらためて以下を記述する必要はありません。
変更したいときのために… 

.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
.fa-apple:before {
	content: "\f179";
	}
.fa-2x {font-size:2em;}
.fa-ul {
	padding-left: 0;
	margin-left: 2.142857142857143em;
	list-style-type: none;
	}
.fa-ul > li {
	position: relative;
	}
.fa-li {
	position: absolute;
	left: -2.142857142857143em;
	width: 2.142857142857143em;
	top: 0.14285714285714285em;
	text-align: center;
	}
.fa-fw {
	width: 1.2857142857142858em;
	text-align: center;
	}

TOP