状態:-
閲覧数:4,493
投稿日:2013-03-10
更新日:2013-07-25
新たな問題発生
・前回「Twitter Bootstrap」のアイコンは、画像なので大きく出来ないと書いたけど、今日、また新たな問題が別のサイトで発生したので、メモ
・それは、「Twitter Bootstrap」のアイコンは、画像なので色を変更できない、というもの
・いや、「黒白」2択できるじゃん! とか、そう言う話ではないのよ
実際に遭遇した、問題になったケース
こんな時こそ「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%;
}
・無事解決
「Ligature Symbols」利用例
×
ゲストコメント一覧
番号 | 内容 | 投稿日 |
---|---|---|
1 | ※ | 2013-03-19 |
2 | タグ | 2013-03-19 |
3 | たぐ | 2013-03-19 |
4 | fdsfsdf | 2013-09-30 |
5 | 33333 | 2014-09-18 |
コメント件数 … 5件 |