CSS 如何将Font Awesome图标添加到按钮中

在本文中，我们将介绍如何在CSS中将Font Awesome图标添加到按钮中。

首先，我们需要使用Font Awesome的字体文件和CSS文件。你可以从Font Awesome的官方网站上下载它们，或者使用CDN链接。

阅读更多：CSS 教程

步骤一：链接Font Awesome文件

在HTML文档中，你需要在标签中添加以下链接来引入Font Awesome的CSS文件：

<link rel="stylesheet" href="path/to/font-awesome.css">

同时，你需要在标签中添加以下样式代码以设置Font Awesome的字体文件：

<style>
@font-face {
  font-family: 'FontAwesome';
  src: url('path/to/font-awesome.ttf') format('truetype');
}
</style>

确保替换链接中的”path/to”为你下载或获取Font Awesome文件的实际路径。

步骤二：创建按钮

在HTML文档中，你需要创建一个按钮元素。例如：

<input type="button" value="按钮">

步骤三：添加Font Awesome图标

接下来，在CSS样式表中，你可以使用::before伪元素来添加Font Awesome图标。

input[type="button"]::before {
  font-family: 'FontAwesome';
  content: 'f007'; /* 这里设置你想要的图标代码 */
  margin-right: 5px; /* 可选，设置图标与按钮文本之间的间距 */
}

在上面的例子中，我们使用了Font Awesome提供的图标字符编码 f007，它对应着一个电影摄影机图标。你可以在Font Awesome的官方网站上找到完整的图标字符编码列表。

示例

最后，让我们来看一个完整的示例，将Font Awesome图标添加到按钮中：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/font-awesome.css">
  <style>
    @font-face {
      font-family: 'FontAwesome';
      src: url('path/to/font-awesome.ttf') format('truetype');
    }
    input[type="button"]::before {
      font-family: 'FontAwesome';
      content: 'f007';
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <input type="button" value="按钮">
</body>
</html>

在上面的例子中，我们添加了一个电影摄影机图标到按钮上。