まず、下記CSSを読み込む。
|
1 |
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> |
下記サイトからCSSをダウンロードしてもOK。
後は、
|
1 |
<i class="fa fa-flag"></i> |
fa-flagの部分を、下記ページの好きな物にすればいいだけ！
アイコンサイズを大きくする
|
1 2 3 4 5 |
<p><i class="fa fa-flag fa-lg"></i> fa-flag（fa-lg）</p> <p><i class="fa fa-html5 fa-2x"></i> fa-html5（fa-2x）</p> <p><i class="fa fa-html5 fa-3x"></i> fa-html5（fa-3x）</p> <p><i class="fa fa-html5 fa-4x"></i> fa-html5（fa-4x）</p> <p><i class="fa fa-html5 fa-5x"></i> fa-html5（fa-5x）</p> |
アイコンと文字間隔を統一化させる
通常だと、アイコンと文字が詰まってしまうので下記のようにする。
|
1 2 3 4 |
<p><i class="fa fa-home fa-fw"></i>あああ</p> <p><i class="fa fa-calendar fa-fw"></i>いいい</p> <p><i class="fa fa-github fa-fw"></i>ううう</p> <p><i class="fa fa-cogs fa-fw"></i>えええ</p> |
リストで利用する
|
1 2 3 4 5 6 |
<ul class="fa-ul"> <li><i class="fa fa-home fa-li"></i>あああ</li> <li><i class="fa fa-calendar fa-li"></i>いいい</li> <li><i class="fa fa-github fa-li"></i>ううう</li> <li><i class="fa fa-cogs fa-li"></i>えええ</li> </ul> |
アイコンをボーダーで囲う
|
1 |
<p><i class="fa fa-quote-left fa-2x fa-border"></i></p> |
引用符の時など、文字を周り込ませる
|
1 |
<p><i class="fa fa-quote-left fa-2x pull-left"></i>アメージングなのだ<i class="fa fa-quote-right fa-2x pull-right"></i></p> |
アイコンを回転アニメーションにする
|
1 2 3 |
<span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-spinner fa-spin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-refresh fa-spin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-cog fa-spin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> |
矢印のなど、角度を変える
|
1 2 3 4 5 6 |
<p><i class="fa fa-shield fa-fw"></i>normal<br /> <i class="fa fa-shield fa-rotate-90 fa-fw"></i>fa-rotate-90<br /> <i class="fa fa-shield fa-rotate-180 fa-fw"></i>fa-rotate-180<br /> <i class="fa fa-shield fa-rotate-270 fa-fw"></i>fa-rotate-270<br /> <i class="fa fa-shield fa-flip-horizontal fa-fw"></i>fa-flip-horizontal<br /> <i class="fa fa-shield fa-flip-vertical fa-fw"></i>icon-flip-vertical</p> |
2つのアイコンを重ねて表示
|
1 2 3 4 5 6 7 |
<p> <span class="fa-stack fa-lg"> <i class="fa fa-heart fa-stack-2x"></i> <i class="fa fa-apple fa-stack-1x fa-inverse"></i> </span> fa-heart と fa-apple </p> |
そのほかにも色々あるかも･･･