fontawesome CDN メモ

MEMO

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.

大きさを変える

<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」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。
タイトルとURLをコピーしました