Logo

菜单

发布于 2026-01-06 1 阅读
0

图标按钮 CSS 样式指南

图标按钮 CSS 样式指南

这是我撰写的系列文章的第十篇，旨在探讨现代 CSS 解决方案如何解决我过去 13 年多前端开发工作中遇到的问题。访问ModernCSS.dev查看整个系列文章及其他资源。

本指南将以上一集“CSS按钮样式指南”为基础，探讨图标按钮的使用场景。我们将介绍图标+文本按钮以及纯图标按钮。

注：由于 SVG 目前拥有极佳的支持，因此推荐将其用于图标系统而非图标字体。我们不会深入探讨 SVG 的具体细节，但会假设您使用的是 SVG 图标。

图标 + 文本按钮

首先，我们先从最简单的方式入手，在现有按钮的基础上进行扩展，在文本旁边添加一个 svg 图标：

<a href="javascript:;" class="button">
  <svg class="button__icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
  Button Link
</a>
Enter fullscreen mode Exit fullscreen mode

对于图标+文本的使用场景，SVG 有 3 个关键特性：

  1. 使用新button__icon类
  2. 该viewBox值紧贴图标边界，理想情况下应为正方形，这样即使值存在差异（例如，24与32）也能在整个图标集中获得最佳效果。
  3. 为了方便使用，我们采取了以下措施：
    • aria-hidden="true"由于 SVG 仅用于装饰，不提供按钮文本之外的任何语义信息，因此辅助技术可以跳过 SVG。
    • focusable="false"- 防止某些版本的IE浏览器中出现“双重焦点”事件。

想了解更多关于图标按钮可访问性的信息：请阅读Sara Soueidan撰写的这篇优秀文章，她是可访问性和SVG方面的专家。

图标样式（适用于图标和文本）

由于display: inline-flex应用于基础图形.button，且widthSVG 图形上没有属性，因此默认情况下图标不可见。

首先，让我们为新.button__icon类添加维度，并使用em单位使其与所用单位保持一致font-size：

.button__icon {
  // You may wish to have your icons appear larger
  // or smaller in relation to the text
  width: 0.9em;
  height: 0.9em;
}
Enter fullscreen mode Exit fullscreen mode

带尺寸的按钮图标

根据规范的默认值，SVG 元素（包括按钮）的path边框fill为黑色。为了调整此设置，我们将使用特殊的关键字currentColor，将按钮的文本扩展color到 SVG 元素：

.button__icon {
  // ...existing styles
  fill: currentColor;
}
Enter fullscreen mode Exit fullscreen mode

按钮图标，填充颜色为 currentColor

最后需要调整的是图标和按钮文本之间增加一些间距，我们将再次使用em单位来实现这一点：

.button__icon {
  // ...existing styles
  margin-right: 0.5em;
}
Enter fullscreen mode Exit fullscreen mode

应用间距的按钮图标

我们需要添加一个实用类，以便将图标放置在文本之后，或者按钮的“末尾”（对于从右到左的语言）。我们将现有边距清零，并将其向左翻转：

.button__icon {
  // ... existing styles

  &--end {
    margin-right: 0;
    margin-left: 0.5em;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<a href="javascript:;" class="button">
  Button Link
  <svg class="button__icon button__icon--end" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>
Enter fullscreen mode Exit fullscreen mode

按钮末端的图标

仅图标按钮

我们假设我们需要常规按钮（带图标或不带图标）以及仅带图标的按钮。这一点很重要，因为我们会复用现有.button类并创建一个新类，这样就无需重新定义重置方法和基础视觉样式。重写的代码量极少。

<a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" 
aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>
Enter fullscreen mode Exit fullscreen mode

图标+文字按钮的变化：

  1. 将该icon-button类添加到a
  2. aria-label="Icon-only Button"由于我们已移除视觉文本，因此添加了可访问的文本替代方案。
  3. 将 SVG 上的类交换为icon-button__icon

重要提示：文本选项的值aria-label应该描述按钮的功能，而 不是 图标的内容。如需了解更多信息以及提供文本替代方案的其他方法，请参阅Sara Soueidan 的文章。

这是调整前的结果——一个看起来空荡荡的按钮，因为我们又回到了宽度不足的问题：

预设样式的图标按钮

首先，我们来创建新类。由于CSS 中存在“C”标记，这条规则需要放在以下.button规则之后：

.icon-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0.35em;

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}
Enter fullscreen mode Exit fullscreen mode

我们定义了一个新的width、height可完全根据您的设计要求进行调整的参数，但它应该是一个正方形。这样，border-radius: 50%应用该参数后就能创建出“圆形”的外观。

然后，我们添加一些内边距（同样根据您的喜好/设计要求），以便在 SVG 图标和按钮边界之间留出一些空间。

接下来，我们定义icon-button__icon类。这里的区别在于，我们希望按钮的样式width与height容器的样式一致，因此我们将其设置为 `true` 100%。这样，只需重新定义类的font-size`class` 属性，即可扩展到多种尺寸的图标按钮.icon-button。

以下是进展情况：

仅图标按钮样式

虽然这并非我们想要的结果，但我们可以通过调整类中的以下属性来解决这个问题.button。我们将使用:not()选择器来排除仅适用于普通按钮的属性：

.button {
  // ...existing styles

  // Find these styles and update, not duplicate:
  &:not(.icon-button) {
    padding: 0.25em 0.75em;
    min-width: 10ch;
    min-height: 44px;
  }
}
Enter fullscreen mode Exit fullscreen mode

现在我们得到了我们想要的：

已完成的仅图标按钮

演示

包括使用.button--small上一集中创建的类，以及一个“真正的按钮”来验证样式对两个元素是否同样有效：

试试 ButtonBuddy，它可以帮你创建易于访问的按钮颜色。我开发的这款网页应用能帮你轻松掌控按钮调色板中的所有对比度。

文章来源：https://dev.to/5t3ph/icon-button-css-styling-guide-6m
Go Baralga 的 DDD 汉堡
隆重推出热情欢迎徽章！🌟🎉