どうも!
最近のwebサイトには、webフォントを使っているサイトが増えていますね。
このサイトにも、webフォントは使われています。
webフォントが使われていると、伝えたいことを明確にしたり、
おしゃれなサイトにできたりしますね。
テキストにwebフォントを使うなら、アイコンにもフォントを使ってみたい!!
何て思ったりしませんか?
そんな時に使える、アイコンwebフォント「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と5段階の調節が可能です。このクラスを
<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のクラスをつけるときれいに成形します。
今回はひとまずこんな感じで使えますよ!という形で終わります。
実務で使い慣れた頃に、良い発見をしてブログか何かで書けるようにします。