<i> 標簽顯示斜體文本效果。

<i> 標簽和基于內(nèi)容的樣式標簽 <em> 類似。它告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示。如果這種斜體字對該瀏覽器不可用的話，可以使用高亮、反白或加下劃線等樣式。

圖標需要先上網(wǎng)下載小圖標圖片，隨便下載一個就行，這是我下載的

然后css導入圖片

.msg i{

background: url(../images/sprite.png) no-repeat;

}

然后選定你要的小圖標，有ps或者我用的window自帶圖片編輯器查看你所選的圖標大小，我選的是倒數(shù)第二行的大小是18px 18px的 由于i元素是行元素設置不了width和height所以要設置成inline-block，最終調(diào)整完是這樣的

.msg i{

display: inline-block;

vertical-align: middle;

width: 18px;

height: 18px;

margin: 0px 2px 3px;

background: url(../images/sprite.png) no-repeat;

}

然后用background-position來定位選取你所要的小圖標，位置還是圖片編輯器里找到，先是小圖標頂端到圖片頂端距離然后是小圖標左邊到圖片左邊距離前面再加“-”符合就可以了，下面這是我選的圖標位置

.msg .ati{background-position: -746px -1383px;}

.msg .err{background-position: -135px -1383px;}

.msg .ok{background-position: -386px -1383px;}

【用 <i> 元素做圖標在語義上是不正確的（雖然看起來像 icon 的縮寫）；

<i> 比 <span> 短，但 gzip 后差異很小，不過打字可以少按三個鍵；

多數(shù)圖標用的是空 <i> 元素，配合 ::before 偽元素實現(xiàn)，因為沒有內(nèi)容，讀屏器不會朗讀（這樣即使有特殊處理也跳過了），機器理解起來應該也沒什么影響。

綜合來看，從實用性上暫時沒看出有什么缺陷，所以目前用不用 <i> 取決于你對于遵循規(guī)范有多潔癖。

另外我的觀點是：大家都遵循開放的標準來做事，未來可能少走彎路。少用 hack 的方法解決問題，有助于你寫出向未來兼容的代碼。喜歡用 <i> 寫圖標的朋友可以去 HTML 規(guī)范的郵件組提建議，爭取完善它的使用場景，讓它成為規(guī)范的一部分，那就更完美了。】------這個關(guān)于 i 標簽的解釋摘自知乎