什么是使用的图标，按钮标签

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来处理。适用于所有文件类型的扩展名。这可能不适用于您的具体示例（将不得不看到更大的上下文），但它是一个很好的下载链接等技巧。