什麼是使用的圖標，按鈕標籤

Question

我見過的UI下面的代碼片斷使用圖標與標籤

<a href=""> 
    <img alt src="img/save.gif" class="icon"> 
    <span>Save</span> 
</a> 

OR

它將使意義，使結合本成首選機制單個實體（即圖像圖標加標籤）。

我的擔心是如果我們選擇不同的主題（配色方案），那麼我將無法爲我的標籤使用不同的顏色，並且可能必須重新生成圖像。使用第一種方法使我可以靈活地做到這一點。

Answer 1

我不知道的佈局或顏色你使用，但以下是我的幾點：

1. 圖像和文本之間

   相對對齊可能很難acheive（我基本的HTML/CSS知識）當你有兩個分開

2. 你可以說，你更喜歡讓他們分開，因爲你想在「顏色方案改變」期間改變文本的顏色的可能性。但是你確定你不想改變圖像（另一組圖標）嗎？你可能會遇到顏色不匹配的問題。 （您可以選擇圖標，使其與您網站的所有配色方案「一致」，然後再次以同樣的方式選擇您的標籤顏色）。

同樣，我不知道的佈局/顏色你選擇的，所以確切的答案是（總是）「取決於你的網站」

Answer 2

考慮常見的鏈接圖標超級鏈接提示。例如：

HTML

<a href="files/holidays.pdf">View Holidays</a> 

CSS每個

a[href $='.pdf'] { 
     padding-right: 18px; 
     background: transparent url(icon_pdf.gif) no-repeat center right; 
    } 

樣式可以用CSS來處理。適用於所有文件類型的擴展名。這可能不適用於您的具體示例（將不得不看到更大的上下文），但它是一個很好的下載鏈接等技巧。