「Twitter Bootstrap」のアイコンは、画像なので色を変更できない

ケーススタディ

・「アイコン」をリンクとして利用したい
・但し、デザイン上等の理由で、文字は入れたくない

---

実際に試してみた

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

・画像なのでアイコンは黒いまま
・リンクであることが全く分からない
・このままでは使えない

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%;

}

・無事解決

利用例

・このページの「閲覧数:0」左にある「＋」で実際に利用している

---

意図

・目立たせる必要はない
・分かる人にだけ分かれば良い
・うるさくなり過ぎても困る
・だけど、一応リンクとして、サイトデザインの観点から(アイコン)色を統一させたい