カラーミーキット アイコンの簡単な使い方

Tweet

Pocket

前回の記事でカラーミーキットのグリッドの使い方やカスタマイズ方法を紹介しました。今回はカラーミーキットの便利機能の１つであるアイコンフォントの使い方を紹介します

カラーミーキットの簡単な使い方 アイコン編

カラーミーキットの導入方法やレイアウトに関しては前回の記事をご覧ください。ここではアイコンの使い方についてまとめていきます。

アイコンの基本的な使い方

カラーミーキットのデフォルトテンプレートではヘッダーメニューにアイコンが使われています。

<ul class="inline">
  <li>
    <a href="#"><i class="icon-b icon-user"></i>マイアカウント</a>
  </li>
  <li>
    <a href="#"><i class="icon-b icon-adduser"></i>会員登録</a>
  </li>
  <li>
    <a href="#"><i class="icon-b icon-login"></i>ログイン</a>
  </li>
  <li>
    <a href="#"><i class="icon-b icon-logout"></i>ログアウト</a>
  </li>
</ul>

デフォルトテンプレートの例を見れば分かるように、アイコンは色とサイズを指定するclass、形を指定するclassの２つをセットすることで使用可能になります。

使えるアイコンの形はカラーミーキットのドキュメントに記載されているのでこちらをチェックしておきましょう。

おすすめ商品の見出しにアイコンを入れてみる

アイコンはどこにでも設置可能です。例えばおすすめ商品などの見出し部分に設置するなら以下のようになります。

<h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">
  <i class="icon-lg-b icon-heart"></i>おすすめ商品
</h2>

この他にもサイドバーの見出しやデフォルトテンプレートのようにメニューにアイコンを設置することもできます。自由にカスタマイズできるので色々試してみましょう。