fontawesome CDN メモ

MEMOです。

フォントオーサムのCDN

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

fontawesome

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

大きさを変える

<i class="fa fa-camera-retro fa-2x"></i>

fa-lg（約1.33倍）,
fa-2x（2倍）,
fa-3x（3倍）,
fa-4x（4倍）,
fa-5x（5倍）

の5パターン。

クラスに「fa-w」を入れて、liの頭を揃える

<ul class="nav nav-pills nav-stacked" style="list-style:none;">
  
	<li class="active"><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>

fontawesomeを使ってローディングアイコンぽくする方法

IE9以下は対応していません。

「fa-spin」を使用します。。

<i class="fa fa-spinner fa-spin fa-3x"></i>

MEMO

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

saruwakakun.com