WebフォントによるSNSアイコン表示とスクリプト動作のテスト用、という表題通りのエントリ。最適化まで含めて順を追って色々実験用（つまり随時更新、テストしやすいように最新エントリをあえて起こしてる）。

<div>タグのclass属性でWebフォント指定 ”lsf" と、各SNSの色および共通サイズ属性指定 "lsf_*" を併記。
初期状態だと<div>タグごとに改行されてしまうので、css内で "display: inline-block; _display: inline;" を記述して改行無視。
すると、↓こんな表示に。

確認用画像：



Webフォントによる表示：


ちなみに、Webフォント表示の可否はこんな案配。

△はcss内のWebフォントURL記述をオンライン上の絶対URL指定では表示できず、ローカル参照も可能な相対URL指定にしたすると表示できるケース。Win IEの挙動だけは若干特殊（何故絶対URLだと見えないw）だけど、ローカルhtml群から外部のURLを見ようとすると弾かれるブラウザが多いっぽいので、iBlogテンプレートの記述をカスタマイズしてcssの位置を固定、Webフォントは相対指定にした方が良いっぽい（実際、その方がカスタマイズが楽）。

OS	ブラウザ	ローカル環境	オンライン
iOS 6.1.2	Safari 6.0	○	○
iOS 9.2	Safari 9.0	○	○
	Firefox 1.3	○	○
	Chrome 47.0.2526.107	○	○
MacOSX 10.6.8 Server	Safari 5.1.10	×	×
	Firefox 43.0.3	△	○
	Chrome 47.0.2526.106	△	○
MacOSX 10.8.5	Safari 6.2.8	○	○
	Firefox 43.0.2	△	○
	Chrome 47.0.2526.106	△	○
MacOSX 10.10.5	Safari 9.0.1	○	○
	Firefox 43.0.3	△	○
	Chrome 47.0.2526.106	△	○
Windows 7 SP1	Internet Explorer 11.0.26	△	△
	Firefox 43.0.2	△	○
	Chrome 47.0.2526.106	△	○

利用のためのソースは、Ligature Symbolsを組み込んだ上（解説記事）で、以下の通り。

HTML

<div class="lsf lsf_mail">mail</div>
<div class="lsf lsf_line">line</div>
<div class="lsf lsf_mixi">mixi</div>
<div class="lsf lsf_twit">twitter</div>
<div class="lsf lsf_face">facebook</div>
<div class="lsf lsf_hate">hatenabookmark</div>
<div class="lsf lsf_tumb">tumblr</div>
<div class="lsf lsf_goog">google</div>

CSS

.lsf_mail {color: #888888;}
.lsf_line {color: #5ae628;}
.lsf_mixi {color: #d1ad59;}
.lsf_twit {color: #00aced;}
.lsf_face {color: #305097;}
.lsf_hate {color: #008fde;}
.lsf_tumb {color: #34526f;}
.lsf_goog {color: #db4a39;}

.lsf_mail, .lsf_line,
.lsf_mixi, .lsf_twit,
.lsf_face, .lsf_hate,
.lsf_tumb, .lsf_goog {

font-size: 48px;

margin: 0px 1px;

display: inline-block;

_display: inline;

}