fontawesome CDN メモ

最終更新日

MEMOです。

 

フォントオーサムのCDN

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

fontawesome

https://fontawesome.com/icons?from=io

大きさを変える

[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

https://saruwakakun.com/html-css/basic/font-awesome

nosutaNst

シェアする