さぁ!検索しよう!

画像を使わずにアイコンフォントを使ってフラットなボタンを作る方法を紹介します。

Font-Awesome

アイコンはFont-Awesomeのアイコンを使います。

始めにFont-Awesomeの簡単な使い方を説明します。準備として、Font-AwesomeのGet Startedへ行き、下記の赤く囲まれたコードをHTMLのhead内に記述し、スタイルシートを読み込みます。

post-18-3_mini

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

次に、Font-AwesomeのThe Iconsへ行き、使いたいアイコンを選びます。

post-18_mini

使いたいアイコンが決まったらクリックし、下記の赤く囲まれたコードをHTMLの配置したい場所へ記述します。

post-18-2_mini

すると、下記のように先ほど選んだアイコンが出力されます。

当然、フォント形式なのでcolorfont-sizeなども適用されます。

以上がFont Awesomeの使い方でした。

それでは、いよいよ本題に入っていきます。まずは完成品をご覧ください。

完成デモ

フラットデザインに使えるボタンに仕上がりました。

続いて各コードです。

始めにHTMLです。

HTML

<ul class="nav">
    <li><a href="#"><i class="fa fa-home"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-envelope-o"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    <li><a href="#"><i class="fa fa-rss"></i></a>
    </li>
</ul>

ul要素でできたリスト内にそれぞれa要素にアイコンたちが包まれています。

続いてCSSです。

CSS

i {
  color: #fff;
}

.nav {
  list-style: none;
}

.nav li {
  display: inline-block;
  margin-right: 10px;
}

.nav li a {
  background: #DF7401;
  border-radius: 50%;
  display: block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 50px;
}

li要素にdisplay:inline-block;を指定し、リストを横並びにしています。

また、アイコンを上下左右中央に配置するため、text-align:center;の指定とline-heightheightの値と同じ指定にしています。

以上です。