簡単便利！Font Awesomeを使ってみましょう！3

こんにちは。フローラです。
前回はFont Awesomeの使い方応用編で、アイコンの大きさや色を変えたりくるくる回したりしました。
Font Awesomeを初めて使ってみると、色々なカスタマイズのアイデアが浮かぶかもしれません。
今回は応用編その２。さらに便利な使い方、面白い使い方を見ていきましょう。

Font Awesomのアイコンを使ってリストを作ってみましょう！

ノーマルなリストは通常ul（リスト範囲）タグの中にli（個々のリスト）タグを書きます。
今回、ulに「fa-ul」というclass（「fa-ul」はul用のスタイル）、liに「fa-li」というclass（「fa-li」はli用のスタイル）をそれぞれ設定します。

以下ソースです。

<ul class=”fa-ul”>
<li>バス</li>
<li>船</li>
<li>車</li>
<li>バイク</li>
</ul>

以下のように表示されましたでしょうか。

バス

船

車

バイク

反転させてみましょう！

水平方向に反転させるには「fa-flip-horizontal」、垂直方向に反転させるには「fa-flip-vertical」というclassを設定します。

リストを使って書いてみましょう！

<ul class=”fa-ul”>
<li>水平方向に反転させるには「fa-flip-horizontal」</li>
<li>垂直方向に反転させるには「fa-flip-vertical」</li>
</ul>

以下のように表示されます。

水平方向に反転させるには「fa-flip-horizontal」

垂直方向に反転させるには「fa-flip-vertical」

使う場面が想像できない方もいらっしゃると思いますが、「バイクが反転した」だけではなく反転させると別のものに見立てることも可能です（バイクだったら、垂直方向の反転で虫のようにも見えます・・）。
アイコンの種類が増えたような感覚ですね。

CSSファイルを参照したい場合は

Font AwesomeではCSSファイルを自由にダウンロードすることができます。
トップページで「ダウンロード」ボタンを押します。

Font AwesomeWEBサイト
http://fontawesome.io/

Font Awesomeトップページのダウンロードボタンを押します。

ウィンドウが表示されるので「No thanks, just download Font Awesome 4」ボタンを押します。

ダウンロードしたファイルを自分のWEBサイトのプロジェクトフォルダに置き、CSSを独自に変更して使うことも可能です（この場合、head内にCSSへのlinkを書いてくださいね）。
あらかじめ用意されたスタイルはご紹介したものの他にも沢山ありますので、一度CSSファイルを開いて見てください♪
Font Awesomeについてはまだまだご紹介できることがたくさんあります！
今後また続編でご紹介しますので、お楽しみに！！