Ligature SymbolsTwitter Bootstrap で使えるようにしてみた。

210個ものキュートなシンボルフォント!!

つかいかた

Bootstrap の icon-xxx に倣って、ls-icon-xxx とクラス指定してやるだけ。

<i class="ls-icon-file"></i>

グループボタンで使ってみる

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="ls-icon-laugh"></i></a>
    <a class="btn" href="#"><i class="ls-icon-surprise"></i></a>
    <a class="btn" href="#"><i class="ls-icon-wink"></i></a>
    <a class="btn" href="#"><i class="ls-icon-trouble"></i></a>
  </div>
</div>

ドロップダウンで使ってみる

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="ls-icon-web icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="ls-icon-chrome"></i> Chrome</a></li>
    <li><a href="#"><i class="ls-icon-safari"></i> Safari</a></li>
    <li><a href="#"><i class="ls-icon-firefox"></i> Firefox</a></li>
    <li><a href="#"><i class="ls-icon-opera"></i> Opera</a></li>
    <li><a href="#"><i class="ls-icon-internetexplorer"></i> IE</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> その他</a></li>
  </ul>
</div>

フォントなのでボタンのサイズにも勝手にフィット

<a class="btn btn-mini" href="#"><i class="ls-icon-star"></i></a>
<a class="btn btn-small" href="#"><i class="ls-icon-star"></i></a>
<a class="btn" href="#"><i class="ls-icon-star"></i></a>
<a class="btn btn-large" href="#"><i class="ls-icon-star"></i></a>