ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

アイコン+文字セットのボタンのactive擬似クラスをIEで作動させる

なんだか分かりにくいタイトルですが、状況を説明すると

f:id:washiiku:20131110033256g:plain

↑こんな感じのアイコン+文字がセットになってるボタンをCSSで組むときに、適切にマークアップしないとIEでactive擬似クラスがちゃんと動作しないよ、ということです。

 

アイコンをbackground-imageで入れる場合は問題ないのですが、モダンサイトらしくCSSのアイコンセット、例えばFontAwesomeを使ってる場合を想定します。

FontAwesomeを<i class="fa fa-icon"></i>と使うと以下の様なマークアップになります。

<div class="button">
  <i class="fa fa-icon"></i>
  <span>何か文字を入れます</span>

</div>

こうすることでアイコン+文字のセットとなり、buttonクラスにactiveを指定して終了、と行きたいところですがそうは問屋が卸しません。

 

chromefirefox等のブラウザではどこをクリックしてもactiveが反応してくれますが、IEの場合は子要素をクリックしても親要素のactiveが呼び出されないのです。

最近のIEはレイアウト崩れを起こさない良い子だと思っていましたが、油断は禁物です。

activeクラスを作動させるには1階層に収める必要がありますが、FontAwesomeのクラスを呼び出すには<i>タグが必要だし…と考えこんだあなた、FontAwesomeならスマート解決できます。

 

FontAwesomeにはチートシートが用意されており、content属性を指定すればCSSだけでアイコンを描画できるようになっています。

例えばfa-glassを埋め込む場合は

.button {
  &:before {
    font-family: FontAwesome;
    content: '\f000';
    display: inline-block;
  }
}

とすれば文字の直前にグラスアイコンを描画できます。

contentにはチートシートに「&#xf000;」と書かれてあるうち「fから始まる4文字」と、その前に「\」を入れます。

 

それを考慮してマークアップすると

<div class="button">
  何か文字を入れます
</div>

と一階層だけでスッキリ、IE対応もバッチリです。

 

ちなみにphotoshopでデザインカンプを作る時にも、このチートシートの文字列をテキストに埋め込めばFontAwesomeのアイコンを使用できるのでデザイン作業も捗ります。

 

(なぜこんなにFontAwesomeを推すのかというと、他のCSSアイコンをロクに使ったことがないだけで、探せば他にもいいアイコンセットはあるかと思います。)