如何为HTML按钮添加左侧前置图标？（LinkTree类网站开发）

我正在用HTML开发一个类似LinkTree的网站，目前进展不错，但不知道怎么给按钮左侧加图标，示例效果如下：

当前代码：

CSS #

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  padding-left: 48px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
}

button:hover {
  transform: scale(1.1);
}

HTML #

<button class="button" onclick="function()">Twitter</button>

方法1：CSS背景图实现 #

适合用独立图标图片，无需修改HTML结构：

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  padding-left: 48px; /* 预留图标空间 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
  /* 图标相关设置 */
  background-image: url('你的图标文件路径');
  background-repeat: no-repeat;
  background-position: 16px center; /* 水平偏移16px，垂直居中 */
  background-size: 24px 24px; /* 控制图标大小 */
}

.button:hover {
  transform: scale(1.1);
}

方法2：图标字体实现（如Font Awesome） #

用图标字体无需额外图片，样式更灵活：

1. 引入图标字体库（本地引入或使用内置资源）
2. 修改HTML和CSS：

<button class="button" onclick="function()">
  <i class="fab fa-twitter"></i>
  Twitter
</button>

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex; /* 用flex对齐图标和文字 */
  align-items: center;
  gap: 12px; /* 图标与文字的间距 */
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
  justify-content: center; /* 保持整体居中 */
}

.button i {
  font-size: 24px; /* 调整图标大小 */
}

.button:hover {
  transform: scale(1.1);
}

方法3：直接插入<img>标签 #

最直观的方式，直接在按钮内嵌入图标图片：

<button class="button" onclick="function()">
  <img src="你的图标路径" alt="Twitter图标" width="24" height="24">
  Twitter
</button>

.button {
  transition: all .2s ease-in-out;
  background-color: #3481b4;
  opacity: 0.8;
  border-radius: 12px;
  border-color: white;
  border-style: double;
  color: white;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 85%;
  min-width: 80%;
  font-size: 18px;
  justify-content: center;
}

.button:hover {
  transform: scale(1.1);
}

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