こんな時こそ「Ligature Symbols」の出番ですよ！

Ligature Symbols

・「Font Awesome」と同じ仕組み
・日本製のため、日本向けアイコンが利用可能

---

利用手順

1.ダウンロード
・「Ligature Symbols(v2.09)」を「Bootstrap的に使えるようにしたCSSとfontのセットを置いているサイト」があるので、そこからダウンロード

2.アップロード
・ダウンロードした「CSSとfont」をフォルダ毎、サーバへアップロード

3.ファイル読み込み
・「Bootstrap」の後に読み込む
▼/0webapp/views/common/common_siteheader.php

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <link href="/bootstrap/ligature_symbols/css/ligature-symbols.min.css" rel="stylesheet"> 

4.アイコン読み込み

<a href="#"><i class="ls-icon-refresh"></i></a>

・アイコンは、合字を利用したセマンティックなシンボルフォントなので、aタグを付与するだけで、アイコンがリンク色へと変更される
・素晴らしい！
※「Bootstrap」アイコンとの併用も可能

<a href="#"><i class="ls-icon-refresh"></i><!-- 「Ligature Symbols」アイコン … フォント --></a>

<a href="#"><i class="icon-refresh"></i></a><!--  「Bootstrap」アイコン … 画像 -->

---

注意事項

・Bootstrap的書き方「i class="ls-icon-refresh"」でイケるのは、あくまでも「ダウンロード先」がカスタマイズした機能。「Ligature Symbols」本体では、別の書き方になる
・「Bootstrap」アイコンが全て揃っているわけではない。また、同じ名前でも「アイコン内容が異なる」場合がある
・ブラウザによっては表示されないリスクが伴う

---

メリット

・「Ligature Symbols」はフォントなので、位置がズレたりしない
※一方、「Bootstrap」アイコンは画像なので、フォントサイズ等を変更すると、位置がすぐ微妙にずれたりする

---

気になった点

下記条件が揃った際、「フォントアイコン自体」の大きさの違いが若干気になる
・font-size:200%以上で利用
・単独利用ではなく、複数を並べて利用
※「モンキーレンチ」は大きいが、「歩く人」はちょっと小さい、とか
※普通に利用している分にはまったく気にならないのだが…
※自作するしかない？
※フォントアイコンってどうやって作成するのだろう？

とりあえず解決
・大きさが不揃いなのは一部のアイコンだけなので個別指定すれば良い

[class^="ls-icon-"]:before{

	font-size: 100%;

}

.ls-icon-setup{

	font-size: 85%;

}

.ls-icon-walking{

	font-size: 115%;

}

・無事解決