图标很棒，但正如我们一次又一次地看到的那样，它们通常无法独立完成工作。即使您在可访问性方面做得很好，并确保为辅助技术提供相应的文本，但具有讽刺意味的是，您可能会让视觉浏览的用户感到困惑，就像 Matt Wilcox 在这篇文章中描述他母亲的情况一样。
我非常喜欢 这种标记模式，包括内联 SVG 作为首选的图标系统
<button>
<svg class="icon icon-cart" viewBox="0 0 100 100" aria-hidden="true">
<!-- all your hot svg action, like: -->
<path d=" ... " />
</svg>
Add to Cart
</button>或者，如果按钮实际上是一个链接而不是一个由 JavaScript 驱动的操作，我将使用 <a href=""> 而不是 <button> 包装器。