📌  相关文章
📜  如何在 HTML 中的按钮中添加图标？(1)

📅  最后修改于: 2023-12-03 14:52:19.293000             🧑  作者: Mango

如何在 HTML 中的按钮中添加图标？

在 Web 开发中，按钮不仅是用来实现功能的重要元素，还可以作为 UI 设计的一部分提高用户体验。可是，一个普通的按钮可能会显得比较单调。为了让页面看起来更加美观，我们可以通过添加图标来增强按钮的视觉效果。

添加 Font Awesome 图标

Font Awesome 是一个非常流行的图标库，所有的图标都是用字体渲染而成的。在 HTML 中使用 Font Awesome 的步骤如下：

  1. 在 标签中引入 Font Awesome 的 CSS 文件：
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
  1. 在按钮的 标签中添加图标的类名：
<button class="btn">
  <i class="fas fa-search"></i> 搜索
</button>

上述代码中，class 属性为 btn 的按钮添加了一个搜索图标。其中，fas 表示图标的风格为实心图标，fa-search 是搜索图标的名称。

添加自定义 SVG 图标

除了 Font Awesome 外，我们也可以通过添加自定义 SVG 图标来实现相同的效果。

  1. 在 标签中引入 SVG 图标的 CSS 文件：
<head>
  <link rel="stylesheet" href="custom-icons.css" />
</head>
  1. 在按钮的 标签中添加 SVG 图标代码：
<button class="btn">
  <svg class="icon">
    <use xlink:href="#search"></use>
  </svg>
  搜索
</button>

上述代码中，class 属性为 btn 的按钮添加了一个搜索图标。其中，class 属性为 icon 的 标签是用来容纳图标的容器。xlink:href 属性指定了使用的 SVG 图标的引用位置。

  1. 在 CSS 文件中定义 SVG 图标的样式：
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  overflow: hidden;
}

上述代码中，定义了 SVG 图标的样式信息。其中，fill 属性用来控制图标的填充颜色，currentColor 表示使用当前文本颜色。vertical-align 属性用来控制图标的垂直对齐方式，overflow: hidden 属性用来隐藏超出容器边界的部分。

总结

以上就是在 HTML 中添加图标的两种方式。无论是使用 Font Awesome 还是自定义 SVG 图标，都是为了让页面看起来更加美观和易于使用。如果你想了解更多关于 Web 开发的内容，请继续关注我的博客。