如何为HTML按钮添加Font Awesome图标？

步骤1：引入Font Awesome库 #

在HTML的<head>标签里添加Font Awesome的CDN链接，就能直接调用它的图标资源：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

步骤2：给按钮添加对应图标 #

每个社交平台都有专属的Font Awesome图标类，把图标标签放在按钮文字前方即可：

• Facebook：<i class="fa-brands fa-facebook-f"></i>
• Twitter：<i class="fa-brands fa-twitter"></i>
• Instagram：<i class="fa-brands fa-instagram"></i>
• LinkedIn：<i class="fa-brands fa-linkedin-in"></i>
• YouTube：<i class="fa-brands fa-youtube"></i>

可以给图标加个右侧间距，让它和文字分开更美观，直接在CSS里新增对应样式即可。

完整修改后的代码 #

CSS部分 #

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: #333;
}

.social-buttons {
  margin-top: 20px;
}

.social-buttons button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.social-buttons button:hover {
  background-color: #0056b3;
}

/* 给图标添加右侧间距，优化布局 */
.social-buttons button i {
  margin-right: 8px;
}

HTML部分 #

<!DOCTYPE html>
<html>

<head>
  <title>Social Media Buttons</title>
  <!-- 引入Font Awesome资源 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
  <div class="container">
    <h1>Social Media Buttons</h1>
    <div class="social-buttons">
      <button onclick="window.location.href='https://www.facebook.com'"><i class="fa-brands fa-facebook-f"></i> Facebook</button>
      <button onclick="window.location.href='https://www.twitter.com'"><i class="fa-brands fa-twitter"></i> Twitter</button>
      <button onclick="window.location.href='https://www.instagram.com'"><i class="fa-brands fa-instagram"></i> Instagram</button>
      <button onclick="window.location.href='https://www.linkedin.com'"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</button>
      <button onclick="window.location.href='https://www.youtube.com'"><i class="fa-brands fa-youtube"></i> YouTube</button>
    </div>
  </div>
</body>

</html>

额外提示 #

如果想要更换图标样式，比如实心图标或不同版本的同款图标，直接去Font Awesome图标库找到对应类名替换即可；要是不想用CDN，也可以下载Font Awesome的本地文件，然后引入本地CSS资源。

内容的提问来源于stack exchange，提问作者Joshua7564