图标按钮的CSS样式指南（附代码示例）

本指南将在上一集"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>

对于图标+文本的用例，SVG有3个关键特征：

1. 使用一个新的button__icon 类
2. viewBox 的值与图标的边界紧密相连，最好是一个正方形，以便在整个图标集中获得最佳效果，即使值有差异（例如：24 对32 ）。
3. 为了方便使用，我们采用

• aria-hidden="true" - 允许辅助技术跳过SVG，因为它是装饰性的，没有提供任何可见按钮文本没有提供的语义价值
• focusable="false" - 防止在某些版本的IE中出现 "双重焦点 "事件

图标+文本#的图标样式设计

.button由于display: inline-flex ，而SVG上没有width 属性，默认情况下，图标还不可见。

因此，让我们首先为我们新的.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;
}

根据规范的默认值，包括path 的SVG部件的fill 为黑色。为了调整这一点，我们将使用特殊的关键字currentColor ，这将把按钮的应用文本color ，扩展到SVG中。

.button__icon {
  // ...existing styles
  fill: currentColor;
}

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

.button__icon {
  // ...existing styles
  margin-right: 0.5em;
}

我们需要添加一个实用类，让图标放在文本之后，或者放在按钮的 "末端"（对于从右到左的语言）。我们将现有的边距归零，并将其翻转到左边。

.button__icon {
  // ... existing styles

  &--end {
    margin-right: 0;
    margin-left: 0.5em;
  }
}

<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>

只用图标的按钮

我们将假设，除了仅有图标的按钮外，我们还需要普通的按钮（有或没有图标）。这一点很重要，因为除了一个新的类之外，我们还将重复使用.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>

从图标+文本按钮的变化：

1. 增加了icon-button 类到a
2. 增加了aria-label="Icon-only Button" ，以提供一个无障碍的文本替代，因为我们已经删除了视觉文本
3. 将SVG上的类交换为icon-button__icon

这是我们在调整之前得到的结果--一个看起来空空如也的按钮，因为我们又回到了无宽度的问题。

首先，让我们来创建我们的新类。由于CSS中的 "C"，这个规则需要放在.button 规则之后：

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

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}

我们定义一个新的width 和height ，这完全可以根据你的设计要求来调整，但它应该相当于一个正方形。这允许在应用border-radius: 50% 时创建一个 "圆形 "外观。

然后，我们添加一些填充物（同样根据你的口味/设计要求），在SVG图标和按钮边界之间添加一些呼吸空间。

接下来，我们定义我们的icon-button__icon 类。这里的区别是，我们希望width 和height 与容器相匹配，所以我们将其设置为100% 。这样，只需重新定义.icon-button 类上的font-size 属性，就可以扩展到多尺寸的纯图标按钮。

下面是进展情况：

这并不是我们想要的，但我们可以通过调整.button 类中的以下属性来解决这个问题。我们将使用:not() 选择器来排除那些只用于普通按钮的属性。

.button {
  // ...existing styles

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

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

Demo#

包括使用上一集创建的.button--small 类，以及一个 "真正的按钮"，以验证两种元素的样式都能正常使用。