アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

Font Awesome の使用例

イメージ

公開:

WebフォントFont Awesomeの使用例です。各アイコンを示すfa-○○の他に更にfa-△△を加えることによってサイズや向きなど変化をつけます。

基本的な使用例

サイズ

20V

(なし)

26V

fa-lg

32V

fa-2x

40V

fa-3x

46V

fa-4x

55V

fa-5x

アイコンが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-ulfa-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で上下反転します。上記の回転とは違います。

← 180°回転)
<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はシンプルなアルゴリズムにしています。)

Font Awesome の使用例のまとめ

補足ですが、一部の例ではScriptを使用して動的に変化させていますが、本家サイトではScriptが必要ないことを特徴の1つに挙げています。

これらアイコンの導入・設置方法は下記記事をご覧願います。