アイコンフォント「Font Awesome」って何でしょう？

i.M.D. Staff

2016.02.19

good
どうも！

最近のwebサイトには、webフォントを使っているサイトが増えていますね。

このサイトにも、webフォントは使われています。

webフォントが使われていると、伝えたいことを明確にしたり、
おしゃれなサイトにできたりしますね。

テキストにwebフォントを使うなら、アイコンにもフォントを使ってみたい！！
何て思ったりしませんか？

そんな時に使える、アイコンwebフォント「Font Awesome」があります。

「Font Awesome」

ステップ1
まずは、ヘッダーに以下のコードを挿入してください。
＜link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"＞
もしくは、ダウンロードしてきて、
link href="ooo/xxx/font-awesome.min.css" rel="stylesheet"

ステップ2
続いて、フォントを選んでください。→ こちらから
選択したら、アイコンの個別のページに飛び、下の方にある
＜i class="fa fa-shopping-basket"＞＜/i＞
class=”fa”は、共通で付いているクラスで、fa-xxxxx(今回はfa-shopping-basket)は、それぞれのアイコンについているクラスです。ここで、スタイルがついています。

ステップ3
クラスをつけるだけで、調整をことができます。

アイコンの大きさを、クラスをつけるだけで調整できます。
fa-lg、fa-2x、fa-3x、fa-4x、fa-5xと５段階の調節が可能です。このクラスを
＜i class="fa fa-shopping-basket　fa-lg"＞＜/i＞

アイコンの横幅を、クラスをつけるだけで決まったサイズにすることができます。
fa-fwを追加するだけで、違うアイコンを使っても、きれいに表示させてくれます。
＜i class="fa fa-shopping-basket　fa-fw"＞＜/i＞

アイコンをリスト表示で使用する場合はこうしましょう。
＜ul class="fa-ul"＞＜li＞＜i class="fa-li fa fa-check-square"＞＜/i＞＜/li＞＜li＞＜i class="fa-li fa fa-shopping-basket"＞＜/i＞＜/li＞＜li＞＜i class="fa-li fa fa-check-square"＞＜/i＞＜/li＞＜/ul＞
ulには、fa-ulを、liには、fa-liのクラスをつけるときれいに成形します。

今回はひとまずこんな感じで使えますよ！という形で終わります。

実務で使い慣れた頃に、良い発見をしてブログか何かで書けるようにします。