サイズ

アイコンが33%増しで大きくなります。（画面サイズの○○Vはイメージです。）

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

また、CSSのfont-sizeでも変えられます。

固定幅と、リストのブレット

• 矢横
• 矢縦
• 点横
• 点縦

上のように、アイコンによっては幅がまちまちで縦並びにするとそろわなくなります。そこでfa-fwを入れると下のようにそろいます。

• 矢横
• 矢縦
• 点横
• 点縦

<ul>
  <li><i class="fa fa-arrows-h fa-fw"></i>矢横</li>
  <li><i class="fa fa-arrows-v fa-fw"></i>矢縦</li>
  <li><i class="fa fa-ellipsis-h fa-fw"></i>点横</li>
  <li><i class="fa fa-ellipsis-v fa-fw"></i>点縦</li>
</ul>

また、リストではfa-ulとfa-liを使うとアイコンがブレットになって幅もそろいます。

• Home
• Info
• Files
• Mail

<ul class="fa-ul">
  <li><i class="fa-li fa fa-home"></i>Home</li>
  <li><i class="fa-li fa fa-info-circle"></i>Info</li>
  <li><i class="fa-li fa fa-file-text"></i>Files</li>
  <li><i class="fa-li fa fa-envelope"></i>Mail</li>
</ul>

回転アニメーション

fa-spinで回転、fa-pulseで8ステップ回転します。IEは10以上で回転します。

<i class="fa fa-frown-o fa-spin"></i>
<i class="fa fa-spinner fa-spinx"></i>
<i class="fa fa-spinner fa-pulse"></i>

方向と反転

fa-rotate-○で回転します。○は90/180/270で時計回りになっています。前記の回転アニメーションと違い、動的に回らず方向を決めるものです。

<div id="catload">
  <i class="fa fa-paw fa-rotate-90"></i>
  <i class="fa fa-paw fa-rotate-90"></i>
  <i class="fa fa-paw fa-rotate-90"></i>
  <i class="fa fa-paw fa-rotate-90"></i>
  <i class="fa fa-heart fa-rotate-90"></i>
  <i class="fa fa-heart fa-rotate-270"></i>
  <i class="fa fa-paw fa-rotate-270"></i>
  <i class="fa fa-paw fa-rotate-270"></i>
  <i class="fa fa-paw fa-rotate-270"></i>
  <i class="fa fa-paw fa-rotate-270"></i>
</div>

	#catload	{
			line-height: 2em;
}

		.fa-paw:nth-child(odd)	{
			margin-right: 10px;
			vertical-align: top;
}

		.fa-paw:nth-child(even)	{
			margin-right: 10px;
			vertical-align: bottom;
}

また、fa-flip-horizontalは左右反転、fa-flip-verticalで上下反転します。上記の回転とは違います。

<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o fa-flip-horizontal"></i>
<i class="fa fa-star-half-o fa-flip-vertical"></i>
		（<i class="fa fa-star-half-o fa-rotate-180"></i>← 180°回転）

重ね合わせ

食事して 軽く飲んで…

<p>
  <span class="fa-stack fa-lg">
      <i class="fa fa-cutlery fa-stack-1x"></i>
      <i class="fa fa-heart-o fa-stack-2x"></i>
  </span>
			食事して
  <span class="fa-stack fa-lg">
      <i class="fa fa-glass fa-stack-1x"></i>
      <i class="fa fa-heart-o fa-stack-2x"></i>
  </span>
			軽く飲んで…
  <span class="fa-stack fa-lg">
      <i class="fa fa-diamond fa-stack-1x"></i>
      <i class="fa fa-heart-o fa-stack-2x"></i>
  </span>
</p>

		.fa-heart-o	{color: #f99;}

色

色はfa-△△ではなくCSSで変えます。ホームはマウスを乗せると色が変わります。

<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
<i class="fa fa-get-pocket fa-2x"></i>
<i class="fa fa-home fa-2x"></i>
<i class="fa fa-folder-o"></i>

		.fa-facebook-official	{color: #3b5998;}
		.fa-twitter				{color: #55acee;}
		.fa-google-plus			{color: #dd4b39;}
		.fa-get-pocket			{color: #d3505a;}
		.fa-home:hover			{color: blue;}
		.fa-bars	{
			font-size: 22px;
			cursor: pointer;
  background-color: lightgray;
			padding: 4px 8px 2px 8px;
  border: 1px solid gray;
}

位置

位置はfa-△△ではなくCSSで変えます。

<div id="rimocon">
  <i class="fa fa-fast-backward fa-2x"></i>
  <i class="fa fa-fast-forward fa-2x"></i>
  <i class="fa fa-backward fa-2x"></i>
  <i class="fa fa-play fa-2x"></i>
  <i class="fa fa-forward fa-2x"></i>
  <i class="fa fa-circle fa-2x"></i>
  <i class="fa fa-pause fa-2x"></i>
  <i class="fa fa-stop fa-2x"></i>
</div>

	#rimocon	{
  width: 200px;
  height: 150px;
  border: 2px solid lightgray;
			position: relative;
}

	#rimocon i	{
			position: absolute;
}

		.fa-fast-backward	{top: 20px; left: 20px;}
		.fa-fast-forward	{top: 20px; right: 20px;}
		.fa-backward		{top: 60px; left: 20px;}
		.fa-play			{top: 60px; left: 87px;}
		.fa-forward			{top: 60px; right: 20px;}
		.fa-circle			{top: 100px; left: 20px; color: red;}
		.fa-pause			{top: 100px; left: 85px;}
		.fa-stop			{top: 100px; right: 20px;}

入れ替え

クリックで開閉します。クラスを替えることでアイコンを入れ替えています。

<i class="fa fa-folder-o fa-2x"></i>

		.fa-folder-o,
		.fa-folder-open-o	{cursor: pointer;}

		$('.fa-folder-o').click(function(){
			$(this).toggleClass('fa-folder-o fa-folder-open-o');
});

タイマー

JavaScriptのsetIntervalを使い一定の時間間隔でクラス（アイコン）を入れ替えています。

<div id="hourglass">
  <i class="fa fa-hourglass-1 fa-2x"></i>
  <input type="button" value="進める／止める" id="btn-start">
</div>

		var time;
		var timeFlg = false;
		var $hgi = $('#hourglass').find('i');
		var i = 1;

		$('#btn-start').click(function(){
			if (! timeFlg) {
				start();
	} else {
				stop();
	}
});

		function start(){
			timeFlg = true;	
			time = setInterval(function(){
				$hgi.removeClass('fa-hourglass-' + i);

				if (i < 3) { i++; }
				else { i = 1; }

				$hgi.addClass('fa-hourglass-' + i);
	},1000);
}

		function stop(){
			clearInterval(time);
			timeFlg = false;
}

（jQueryはシンプルなアルゴリズムにしています。）