Web Fontでアイコン表示

拙サイトの3回目の改装では、見出しの左やTwitter、Facebook、Mailなどのアイコンを、“Ligature Symbols”というウェブフォントで表示している。ただ、ワタクシの使い方だとウェブ・ユーザビリティ的にマズい箇所が出てくるので、“Ligature Symbols”の使い方を一部無理やり改変した。

“Ligature Symbols”の使用箇所

“Ligature Symbols”の表示設定は元来2つある。

1. アイコンのみ表示
http://twitter.com/eszett

2. アイコン＋テキスト表示
twitterhttp://twitter.com/eszett

「1」はブラウザ上ではアイコンのみ表示でウェブ・ユーザビリティ的に代替テキストが用意してあるという形で使用する場合に用い、「2」はアイコンとテキストの両方とも表示する場合に用いる。そのコードは以下のように指定する。

1. アイコンのみ表示
<span class="lsf">twitter</span><a href="URL">URL</a>

2. アイコン＋テキスト表示
<span class="lsf-icon" title="twitter">twitter</span><a href="URL">URL</a>

---

今回拙サイトで使用する際、
画像上「A」のアイコンは、専ら見出しの装飾として使用し音声ブラウザなどでは無視してもらいたいので、コード「2」の<span>タグで囲まれたテキスト「twitter」を削除することで無理やり対応させる。
画像上「C」のアイコンは、ブラウザ上ではアイコンのみ表示でウェブ・ユーザビリティ的に代替テキストを用意したいがため「1」を使用。つまり、

画像上「A」アイコンのコード
<span class="lsf-icon" title="twitter"></span><a href="URL">URL</a>
画像上「C」アイコンのコード
（「1」に同じ）

その際、デフォルトでは両者の見た目や挙動が微妙に異なるので、「A」を（class="lsf-icon"）を「C」（class="lsf"）に合わせる変更。

（変更前）
.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
    （以下略）
}

（変更後）
.lsf-icon:before {
  content:attr(title);
  margin-right:3px;
  font-size:1.4em;
  font-weight:normal; ←「A」は見出しの横に用いるので、太くならないようこれを指定する。
  font-family: 'LigatureSymbols';
    （以下略）
}

表示は

A. アイコンのみ表示
http://twitter.com/eszett

C. アイコンのみ表示＋代替テキスト付
twitterhttp://twitter.com/eszett

見た目が同じでよくわからないので、web font設定済と設定の外れた写真を以下に。

web font設定済

web font設定の外れた状態

見出し横のアイコンは消え、twitterなどSNSやメールのアイコンはテキストに置き換わっている。