使用带按钮标签的图标的首选机制是什么

Question

我看到以下代码片段使用带标签的图标

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

OR

将它组合成一个单独的实体（即图像图标加上标签）是否有意义。

我担心的是，如果我们选择不同的主题（配色方案），那么我将无法为我的标签使用不同的颜色，并且可能需要重新生成图像。使用第一种方法可以让我灵活地这样做。

Answer 1

我不知道您使用的布局或颜色，但以下是我的观点：

1. 当你单独使用两个时，图像和文本之间的相对对齐很难实现（使用我的基本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中处理。适用于几乎所有文件类型扩展。这可能不适用于您的具体示例（必须查看更大的上下文），但这对于下载链接等是一个很好的技巧。