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

Question

我已经看到以下 UI 代码片段，使用带有标签的图标

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

，或者

将其组合成单个实体（即图像图标加标签）是否有意义。

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

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 中处理。适用于几乎所有文件类型扩展名。这可能不适用于您的特定示例（必须查看更大的上下文），但对于下载链接等来说，这是一个很好的技巧。