纯 CSS 按钮图标

按钮图标是网页设计中常见的 UI 元素，可以让用户直观地了解按钮的功能。而纯 CSS 按钮图标则是一种无需额外图片资源的按钮图标实现方式，可以减少网页加载时间和带宽消耗。

实现方法

实现纯 CSS 按钮图标有多种方法，本文介绍其中两种常用的实现方式。

利用字体图标

字体图标是将图形以字符的形式呈现，可以通过 CSS 控制其大小、颜色等属性。常用的字体图标库包括 FontAwesome、Material Design Icon 等。

以 FontAwesome 为例，首先需要将字体文件引入到网页中：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
      integrity="sha384-Qz8WlE6Gv/ZTnTjJZFWeMjWPGsBhlzKMTEgISfYJg6kWxya3+xgpoPbJff2Z2tu8"
      crossorigin="anonymous">

然后可以在 HTML 中使用相应的标签来加入图标，如下所示：

<button class="btn btn-primary"><i class="fas fa-search"></i>搜索</button>

这样就可以在按钮中加入搜索图标了。

利用 CSS 绘制

利用 CSS 绘制按钮图标的方法有很多，其中比较常用的是利用 CSS 的伪元素 ::before 和 ::after。这两个伪元素可以在元素的内容前后插入其他内容，如文本或图标。

下面以三角形图标为例，实现一个向右的三角形图标：

.btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  vertical-align: middle;
  margin-left: 10px;
}

这样就可以在按钮的右侧加入一个三角形图标了。

结语

纯 CSS 按钮图标是一种简单、高效的实现方式，可以提高网页的性能和用户体验。上面只是两种实现方式中比较常用的方法，还有其他更多的实现方式值得探索。