fontawesome CDN メモ

MEMO

MEMOです。

 

フォントオーサムのCDN

[html title=”HTMLソースコード”]
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
[/html]

fontawesome

Font Awesome

大きさを変える

[html title=”HTMLソースコード”]
<i class="fa fa-camera-retro fa-2x"></i>
[/html]

fa-lg(約1.33倍),
fa-2x(2倍),
fa-3x(3倍),
fa-4x(4倍),
fa-5x(5倍)

の5パターン。

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

[html title=”HTMLソースコード”]

<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>

[/html]

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

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

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

[html title=”HTMLソースコード”]
<i class="fa fa-spinner fa-spin fa-3x"></i>
[/html]

MEMO

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。
タイトルとURLをコピーしました