違います
Font Awesomeをはじめとしたアイコンフォントの実装例にはiタグが使われていることが多いですよね。
それもあってかときどきiタグを「アイコンを表すタグ」として認識している方を見かけます。1
ですが、そうではありません。
比較的わかりやすいので日本語版のMDN Web Docsを見てみましょう。2
HTML の興味深いテキスト要素 (
<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。
「アイコンは文章の中で区別されるべき存在である」と捉えられなくはないですが、そもそもアイコンはテキストではありません。
少なくともアイコンを表しているわけではないのは間違いないですね。
それを踏まえてアイコンには何のタグを使えば良いのか
基本的にはspanで良いはずです。
アイコンが使われるのは「前後にテキストがあり、その上で視覚的な装飾を施したい」といった場合が多いのではないでしょうか。
そのため、セマンティックな意味をもたないspanがかえって適切だと思われます。
もちろん様々なケースがあるため一概には言えませんが、筆者は大抵spanを使っています。3
おまけ：なぜアイコンにはiを使うのかを考えてみた
そもそも何故アイコンにはiが使われるようになったのかを調べてみましたが、決定的な原因は分かりませんでした。
そのため以下はあくまで筆者の推測に過ぎません。
もしご存じの方がいたらコメントで教えていただけると幸いです。
- 1文字のタグなのでタイピングが楽
- 役割は違えどiconの頭文字がiであるのは事実だから覚えやすい
- 「
hみたいにデカい影響力を持っていないし、多少変な使い方しても良いよね」の気持ちになってしまった