圖標：使用HTML或CSS？

Question

使用圖標的最佳做法是什麼？

我應該在圖標中輸入html嗎？或者我應該使用CSS背景？

另外，如果我想指定圖像（透明背景）與其他背景顏色（不想每次都創建新的.png文件），該怎麼辦。

任何幫助表示讚賞。謝謝！

Answer 1

使用矢量文件並將其存儲在字體中。這種方法適用於未來未知的分辨率 - 如視網膜。除了圖標應該是矢量繪製，所以它是明顯的一步，以保持它們的矢量。

http://css-tricks.com/examples/IconFont/

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

Answer 2

我更喜歡使用CSS背景圖標 - 這也意味着我可以對所有圖標使用精靈，併爲每個實例適當地定位它們，所以對服務器的調用更少。

如果同一圖標出現在不同的背景上，我會創建2個精靈 - 1個用於光照，1個用於暗色背景，或者您可以使用透明PNG-24。這是一個更大的文件大小，但透明度沒有遮罩，因此適用於所有彩色背景。請記住IE6不支持透明的PNG，所以你可能需要一個後備（如果你在意的話）。

Answer 3

這兩種：作爲用於任何圖像，這取決於如果這是一個image that conveys information或decorative image。

圖片傳達信息

它必須是一個有意義的替代文本（HTML圖片前：鏈接製成只有這個圖片的鏈接絕不是空的，因此圖像不能是。 CSS一個，否則該鏈接將是空的。

裝飾圖像

背景圖像或一個精靈或自定義字體字符或空的替代文本（後者的HTML圖像的一部分，如果它是一個形象的作者威爾l只有在內容使用一次作爲裝飾，你不會添加到樣式表）

Appropriate Use of Alternative Text（編輯：由WebAIM）

編輯：一種情況，用戶將不會看到任何圖片如果他使用High Contrast Mode。然後，如果他在沒有文字的大型「圖標」菜單中看不到任何鏈接，那很糟糕。如果他看不到鏈接項目前面的子彈，但這些鏈接的文本仍然非常清晰，那麼確定。
爲什麼有圖像也不會在頁面上顯示無論是片狀的Wi-Fi，連接速度慢，移動，車代理或家長控制功能，用戶決策的成本，許多其他原因等

Answer 4

CSS通常是因爲更好您可以使用CSS sprites並添加懸停效果。另外，因爲你使用的是CSS，你只需要向一個元素添加一個類，這個精靈就會出現，這是一個更加靈活的解決方案。

<span class="icon">Icon</span> 

CSS：

.icon { 
    background: (images/icon.png) 0 0 no-repeat; 
    width: 25px; 
    height: 25px; 
    text-indent: -10000px; /* hides the text */ 
    display: inline-block; } 
.icon:hover { background-position: 0 25px; } 

唯一的一次，我會建議使用<img>在CSS是爲您的網站的標誌 - CSS不允許你右鍵 - >查看圖像。