ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

オンラインで相談する

Staff Blogスタッフブログ

アイコンフォント「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と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のクラスをつけるときれいに成形します。

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

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

投稿者:i.M.D. Staff
    2016.02.19 | 21:18
    ちなみに、公式サイトは英語なのですが、苦手な方でもわかりやすいと思います。私がなんとなくわかったので!