フリーのハンコ素材サイト

デザインに凝ったホームページを作るときには、そのイメージに合ったアイコンを使いたいですね。今回は、フリーの透過PNG消しゴムハンコ素材サイト「ハンコでアソブ」で配布されているアイコンを紹介したいと思います。

ハンコでアソブ
http://hankodeasobu.com/

リンク、使用報告、クレジット記載不要、かつ商用利用も可とのことです。
統一感のあるデザインで豊富な種類が揃っているところも素晴しいと思います。

一度サイトを訪れてみてはいかがでしょうか?

Antique

Frame

Computer

Twitter Bootstrapで使えるアイコン

Twitter BootstrapではGlyphiconsが使えます。
種類も豊富でクオリティも高いので活用してみてはどうでしょうか?

使い方

アイコン使う場合は<i>タグを使って次のようにします。

<i class="icon-glass"></i>
Bootstrapアイコンの使用例
Bootstrapアイコンの使用例

アイコンを使った例

Twitter Bootstrapのフォーム装飾で紹介したボタンと組み合わせると次のように表示できます。

<a href="#" class="btn"><i class="icon-search"></i> 検索</a>
<a href="#" class="btn btn-primary"><i class="icon-search icon-white"></i> 検索</a>
Bootstrapアイコンの使用例
Bootstrapアイコンの使用例

※アイコンを白色で表示したい場合はicon-whiteとします。

フォームの前にアイコンを表示するには、こちらもTwitter Bootstrapのフォーム装飾で紹介したadd-onを使って表示できます。

<div class="control-group">
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" type="text" />
    </div>
  </div>
</div>
Bootstrapアイコンの使用例
Bootstrapアイコンの使用例

使えるアイコンの一覧

使えるアイコンの一覧はBootstrapアイコンの一覧を参考にしてください。

Bootstrapアイコンの一覧
Bootstrapアイコンの一覧

デモページ

この記事で紹介した画像装飾のデモページは下記でご覧になれます。
Bootstrapアイコンの一覧
Bootstrapアイコンの使用例