<span>の代わりにアイコンに<i>タグを使用する必要がありますか？
私はFacebookのソースを調べました、彼らはアイコンを表示するために<i>タグを使います。
また、今日はTwitterのブートストラップを調べました。アイコンを表示するために<i>タグも使います。
しかし、
I要素は、代替の音声またはムードでのテキストのスパンを表します。または、分類名、技術用語、他の言語の慣用句、思想、船名などの通常の散文からのオフセットを表します。その典型的な活版印刷の表現がイタリック体になっている散文。
アイコンを表示するのになぜ<i>タグを使っているのですか？
それは悪い習慣ではありませんか？
それとも私はここで何かが足りないのですか？
私はアイコンを表示するためにspanを使っています、そしてそれは今まで私のために働いているようです。
更新：
ブートストラップ3はアイコンにspanを使うようになりました。 オフィシャルドキュメント
アイコンを表示するのになぜ
<i>タグを使っているのですか？
その理由は：
- ショート
- 私はアイコンを表します（HTMLではなく）
それは悪い習慣ではありませんか？
ひどい練習。それは意味論上のパフォーマンスの勝利です。
私は少し遅れてここに飛び込んできました、しかし私自身がそれを熟考するときこのページに出くわしました。もちろん、私はFacebookやTwitterがそれを正当化した理由を知りませんが、ここでそれが価値があるものに対する私自身の思考プロセスがあります。
最後に、私はこのやり方はそれほど意味のないことではないと結論しました（それは一言ですか？）。事実、「iはアイコンのためのもの」という短さとNiceの連想に加えて、わかりやすい<img>タグが実用的でない場合は、実際にはこれがアイコンの最も意味的な選択であると思います。
1.使い方は仕様と一致しています。
W3が主に考えていたものではないかもしれませんが、<i>の公式仕様はアイコンをかなり簡単に収容できるように思えます。結局、reply-arrowシンボルは別の意味で "reply"と言っています。それは読者になじみがないかもしれないそして通常イタリック体にされるであろう専門用語を表します。 （「ここTwitterでは、これをreply arrow）と呼びます。）そしてそれは別の言語の用語です。それはシンボリック言語です。
もし、矢印の代わりにTwitterが（英語のページで）<i>shout out</i>や<i>[Japanese character for reply]</i>を使っていたら、それは仕様と一致するでしょう。では、どうして<i>[reply arrow]</i>じゃないの？ （ここでは、厳密にはHTMLのセマンティクスについて説明しています。アクセシビリティについては説明していません。後で説明します。）
私の知る限りでは、アイコンの使用法によって明示的に侵害された仕様の唯一の部分は「テキストのスパン」句です（タグにテキストも含まれていない場合）。 <i>タグが主にテキスト用のものであることは明らかですが、それはタグの全体的な意図と比較してかなり小さい詳細です。このタグに関する重要な質問は、それがどんな形式のコンテンツを含んでいるのではなく、そのコンテンツの意味が何であるかということです。
あなたが "テキスト"と "アイコン"の間の行がウェブサイト上でほとんど存在しないことができると考えるとき、これは特に当てはまります。テキストはアイコンのように見えるか（日本語の例のように）、アイコンはテキストのように見えることがあります（「送信」と書かれたjpgボタンのように）。 CSS経由の画像テキスト、画像 - 誰が気にしますか？それはすべての内容です。障害のある人間、障害のあるブラウザ、検索エンジンのスパイダー、その他さまざまな種類のマシンがすべての人がその意味を理解できる限り、私たちは仕事をしてきました。
そのため、仕様の作成者がこれを明確にすることを考えていない（または選択していない）という事実は、意味のあることを行うことから私たちの手を結び付けるべきではなく、タグの精神とも一致します。 <a>タグはもともとユーザーを他の場所に連れて行くことを目的としていましたが、今ではライトボックスがポップアップすることがあります。おお、大丈夫？仕様に追いつく前にクリックでライトボックスをポップアップする方法を誰かが考え出していたとしても、現在の定義と完全に一致していなくても、<a>ではなく<span>タグを使用するべきでした。それでもタグの精神と一致していました（「ここをクリックすると何かが起こります」）。 <i>についても同じことが言えます。どんな種類のものでも、あるいは創造的に使用しても、代替用語または分離した用語の一般的な考え方を表します。
2. <i>タグ/意味的な意味をアイコン要素に追加します /
アイコンクラスをそれ自身で運ぶための代替オプションは<span>です。もちろんこれは意味的な意味を持ちません。マシンが<span>に何を含んでいるのかを尋ねると、それは「私はしないでください。何でもありえます」と言います。しかし、<i>タグには、「通常の言葉とは違う言い方、またはなじみのない言葉が含まれています」と書かれています。これは「アイコンを含む」と同じではありませんが、<span>よりもずっと近くにあります。
3.結局、一般的な用法が正しくなります。
上記に加えて、マシンリーダー（検索エンジン、スクリーンリーダーなど）が、Facebook、Twitter、およびその他のWebサイトでアイコンに<i>タグを使用することを考慮に入れることを検討する価値があります。彼らは、必要な方法でコードから意味を抽出することを気にするのであれば、仕様を気にする必要はありません。それで、彼らは単に「ここにアイコンがあるかもしれない」ということを単に記録するために一般的な使用法のこの知識を使うかもしれません。ですから、あなたがあなたのウェブサイト上のアイコンに<i>を使うことを選択したなら、あなたはそのスペックよりもっと多くの意味を提供しているかもしれません。
さらに、この使用法が広まったら、将来的には仕様に含まれるでしょう。それであなたは<span>sを<i>のものに置き換えてあなたのコードを見ていくことになります！そのため、特に現在の仕様と明確に矛盾していない場合は、仕様の方向性と思われるものを理解することが理にかなっているかもしれません。一般的な用法では、他の方法よりも言語の規則が決定される傾向があります。あなたが十分に年をとっているならば、あなたは「Webサイト」がWordが新しい時の公式のつづりだったことを覚えていますか？辞書はスペースがあり、Webは大文字でなければならないと主張しました。その意味的な理由がありました。しかし、一般的な用法では、「なんでも、それはばかげています。「ウェブサイト」を使っているのは、より簡潔で見栄えがよいからです」そしてやがて、辞書はその綴りが正しいと正式に認めた。
4.だから私は先に行き、それを使っています。
それで、<i>はスペックのおかげでマシンにより多くの意味を提供します、私たちは「i」を「icon」、そしての長さはたった1文字だからです。同等のテキストを<i>タグの内側またはそのすぐ隣（Twitterの場合と同様）に含めると、スクリーンリーダーはクリックして返信する場所を理解し、CSSが読み込まれない場合はリンクを使用できます。これを念頭に置いて、私はマイナス面を見ません。
Quentinの答えは、iタグをアイコンの定義に使うべきではないと明確に述べています。
しかし、Hollyは、spanはそれ自体には意味がないと示唆し、iタグの代わりにspanを支持して投票しました。
意味的でimgタグを含むため、altを使用することを提案する人はほとんどいません。しかし、空のimgでもサーバにリクエストを送信するので、srcも使用しないでください。 ここを読んで
正しい方法は
<span class="icon-fb" role="img" aria-label="facebook"></span>
これはalt内にspanタグがないという問題を解決し、視覚障害のあるユーザーにも利用しやすくなります。それは意味論であり、タグを悪用（ハッキング）していません。
私の推測：Twitterはレガシーブラウザをサポートする必要性を見ているので、そうでなければ彼らは:before/:after疑似要素を使用するでしょう。
レガシーブラウザは私が述べたそれらの擬似要素をサポートしていません、それでそれらはアイコンのために実際のHTML要素を使用する必要があります、そしてアイコンは 'exclusive'タグを持たないので、彼らはただ<i>タグと一緒に行きました、そしてすべてのブラウザそのタグをサポートします。
彼らは確かに<span>を使っていたかもしれませんが（これはまったく問題ありませんが）、おそらく上で述べた理由に加えて Quentin で述べられたものもBootstrapが<i>タグを使う理由です。
スタイルの理由で余分なマークアップを使用するのは悪い習慣です。それが、コンテンツをスタイルから分離するために pseudo-elements が考案された理由です。しかし、レガシーブラウザをサポートする必要があるときこういうことをする。
PS。アイコンが 'i' で始まっていて<i>タグがあるという事実は完全に偶然の一致です。
私は他のみんなの答えに対して全く異なるアプローチをここに取ります。私の解決策を前に付けさせて、特に標準的なHTMLの字句タグ定義の文脈では、時には標準と規約が破られることを意味すると主張することによって主張します。
それ自体が目的を明確に示すカスタム要素を作成するのを止めるものは何もありません。
最近のブラウザでもIE 6+（w/shim）でも、以下のようなことをサポートできます。
<icon class="plus">
または
<icon-add>
タグを正規化するようにしてください。
icon { display:block; margin:0; padding:0; border:0; ... }
iE9以前をサポートする必要がある場合はシムを使用してください（下記の投稿を参照）。
このStackOverflow Postをチェックしてください：
HTML5であなた自身のhtmlタグを作成する方法はあります /
私の主張をさらに進めるために、GoogleのAngular Directivesと新しいPolymerプロジェクトはどちらもカスタムHTMLタグの概念を利用しています。
これはかなり悪いと思いました - 私は最近Joomlaのテンプレートで作業していて、<i>タグを使用していたためにW3Cが失敗し続けていたためです。 CSSはHTMLではなくなりました。
テンプレートを見て、すべての<i>タグを代わりに<span style="font-style:italic">に変更した後、テンプレート全体が奇妙に見えるのはなぜだろうと思ったので、それは本当に悪い習慣になります。
これが<i>タグをこのように使うことが悪い考えである主な理由です - 後で自分の作品を見ようとしているのが誰なのかわからないし、実際に表示しようとするのではなくテキストをイタリック体にするアイコン。私はちょうどウェブサイトにいくつかのアイコンを入れて、私は次のコードでそれをやった
<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">
そのようにして私は1つのクラスに私のすべてのアイコンを持っているので私が加える変更はすべてのアイコンに影響を与えます（私は彼らにもっと大きいか小さい、または丸みを帯びた縁などがほしいと言います）。アイコンは「イタリック体のテキスト、イタリック体の終わり」というだけのものではなく（スクリーンリーダーが画面を読む方法を正確にはわかりませんが、そのようなものになると思います）、タイトルもユーザーにマウスオーバーの機会を与えます画像を見て、理解できない場合に備えて、アイコンが何であるかを伝えるツールチップを入手してください。 <i>を使用するよりもはるかに優れています - そしてそれはW3C標準にも合格しています。
リンク<a>タグの中に絶対位置のあるアイコンを配置したいときにも便利だと思いました。
私は最初に<img>タグについて考えましたが、リンク内のそれらのタグのデフォルトのスタイルは通常ボーダースタイルや影効果を持っています。さらに、 "src"属性を定義せずに<img>タグを使用するのは間違っていると感じますが、背景画像スタイルシート宣言を使用しているので、画像がゴーストしたりドラッグしたりすることはありません。
この時点で<span>や<i>のようなタグを考えています - その場合<i>はこのタイプのアイコンと同じくらい意味があります。
全体として、私は直感的であること以外の利点は、このタグをアイコンとして機能させるために最小限のスタイルシートの調整が必要なことです。