動的な変更に強い！擬似要素でWebアイコンを表示させる。(IE対策も)

こんにちはjunです。Webアイコンっていいですよね。サイトはお洒落になるし、各ボタンの意図やUX/UIの観点では重要な物です。フォントを実装するといば、FontAwsome、GoogleIconを使うのがメインだと思います。中には画像でやる人もいるけどね。

ただアイコンというのは単独ではなくて、文字と併用したり、要素の一部としてひっそりと使うことが多いです。これらのアイコンを入れるときは

<i class="far fa-smile-wink"></i>

と言ったiタグを入れるのが簡単ですが実務で扱うようなサイトの場合、この方法では面倒になることがあります。

タグの操作が必要

iタグと対応するアイコンのクラス名を入れることで、アイコンは表示することはできます。しかしタグでアイコンを打ち込むと、対応するアイコンごとのHTMLタグを埋め込む、必要性が出てきてしまいます。

特に動的に内容を出力したり変更したりする場合は特に大変です。例えば下図のようなリストタグの要件があるとします。

胡散臭い内容ですが、とりあえずUX的にもこんなリストデザインが必要になったとしましょう。

iタグでやってみると...

今回の要件ではページの至る箇所で使われることとします。するとリストタグとして使う性質上、

• リストの数が決まっているわけではない。（可変的）
• 内容によって数が変わる。

という内容が可変的であるという考慮が必要です。そのためiタグというHTML自体を埋め込んで対処すると、上記のデザインが必要な箇所全てにiタグを入れる必要が出てきます。

リストの数が少なければなんとか対処できますが、大量にあったり、リリース前段階に内容が変わるなんて普通に起きます。差し替えというのは間違えが起きやすいです。そのためiタグでアイコンを埋め込んで表示する方法は、このような動的な変更に弱いです。

もしiタグ埋め込み方式をするとなれば予め、アイコンのiタグを入れてdisplayで操作したりとか、jsで気合でタグを埋め込むとかになりますが、どちらもいい手段とは言えません。

擬似要素でアイコンをつける＝クラス名で操作可能

iタグでアイコンを変える場合、要素であるiタグ、そしてクラス名が必要です。ただし擬似要素を扱うことでクラス名を付け加える、書き換えるだけでアイコンの変更と、付与・削除ができるようになります。

擬似要素は特に「付与・削除できる」という点がiタグ埋め込みより優れています。上のリストタグのHTML/CSSは以下のように書かれています。

<ul class="p-deco_list u-list_01">
    <li>最近よく眠れない..</li>
    <li>なかなか疲れが取れない..</li>
    <li>朝起きるのが辛い..</li>
</ul>

<ul class="p-deco_list u-list_02">
    <li>使い始めてから、寝つきがよくなった！</li>
    <li>疲れが嘘のように取れた！</li>
    <li>朝の目覚めが変わった！</li>
</ul>

.p-deco_list li{
    list-style:none;
}

 /*　擬似要素アイコンの共通設定*/
.p-deco_list li::before{
    content:'';
    font-family: 'FontAwesome';
    padding:5px 10px; /* 文字間隔調整 */
}

.u-list_01 li::before{
    content:'\f119';
}

.u-list_02 li::before{
    content:'\f4da';
}

iタグを入れない代わりに、ulタグに擬似要素アイコンを付けるための設定（p-deco_list）とアイコンの種類を指定（u-list_*）しています。そしてCSSでクラス名配下のliに対して擬似要素を付けるようにしています。

擬似要素でアイコンを表示するのは意外と簡単

CSSを見ればわかりますが、意外と簡単です。fontawesome、GoogleIconは「フォントアイコン」とも呼ばれているように、文字のように扱うことができます。

fontawesomeを使うならば、font-familyに’FontAwesome’と入れればいいのです。 するとCDNとかがちゃんと読み込まれていれば、fontawesomeのアイコンが使えるようになります。

そしてアイコンの種類はcontentで指定します。「\f4da」みたいなのは文字コードです。この文字コードはfontawesomeで簡単に見つけられます。下図のfontawesomeのアイコン詳細画面を開くと、iタグの横に「f4da」とあります。

この英数字とバックスラッシュ（\）をCSSのcontentに入れればアイコンの指定が完了です。バックスラッシュを入れないと、文字コードでなく「f4da」という文字列として認識されてしまいます。

「擬似要素！？iタグより難しいじゃん..」と思う方は、iタグで表示されたアイコンを開発者ツールでみてみましょう。実はiタグもこの方法と同じように、クラス名で文字コードを指定して、擬似要素内にアイコンを表示しているだけなんですよ。その方法をiタグ使わないでやっているだけです。

IE野郎対策

私もiタグがいらなくて、クラスを指定すればいいことにウキウキしながら実装を進めていくと問題にぶち当たりました。IEです。実は下のコードだけではIEは表示されないという事件が発覚して、頭を悩ませていました。

.p-deco_list li::before{
    content:'';
    font-family: 'FontAwesome';
    padding:5px 10px; /* 文字間隔調整 */
}

chromeやFireFox（一応Edge）は表示されるんですが、IE11は表示されてませんでした。要件にはIE11が入っていたので実装は必須です。頭を悩ませてググっていると方法がありました。

.p-deco_list li::before{
    content:'';
    font-family: 'FontAwesome';
    font-feature-settings: 'liga';
    padding:5px 10px; /* 文字間隔調整 */
}

「font-feature-settings: ‘liga’;」というのを設定したらなんと！表示されました。このプロパティですがmdnでは

(；´Д`A？

全然分からん。とりあえずフォントアイコン＝フォントなので、そのアイコンフォントを表示させるための設定がIEではないのか？と結論づけました。フォントについて詳しい人教えてください。

アイコンは基本的には擬似要素がいいかも

そんな感じで、擬似要素を用いてアイコンを付ける方法は以上です。今回の例で出したような、動的な内容にアイコンが伴う場合はクラス名で指定できる、擬似要素アイコンがiタグ埋め込みより優れています。意外とやっている原理は簡単なのでぜひ使えると便利ですよ。