在CSS中，我們可以使用偽元素（::before或::after）或背景圖像（background-image）來在按鈕上添加圖標(biāo)，以下是兩種實現(xiàn)方式：

方法一：使用偽元素

我們可以通過在按鈕的樣式中添加::before或::after偽元素，并設(shè)置其content屬性為圖標(biāo)對應(yīng)的字符或字符串，從而實現(xiàn)圖標(biāo)的顯示，我們可以使用Font Awesome字體庫中的圖標(biāo)字符，例如fa-home表示主頁圖標(biāo)。

.button {
  position: relative;
  font-size: 20px;
  color: #fff;
  background-color: #333;
  border: none;
  padding: 10px 20px;
  text-align: center;
}
.button::before {
  content: "\f015"; /* Font Awesome中的主頁圖標(biāo)字符 */
  position: absolute;
  left: 10px; /* 根據(jù)需要調(diào)整圖標(biāo)位置 */
}

方法二：使用背景圖像

我們也可以通過設(shè)置按鈕的background-image屬性為圖標(biāo)的URL或數(shù)據(jù)URI，來實現(xiàn)圖標(biāo)的顯示，這種方法需要預(yù)先準(zhǔn)備好圖標(biāo)的文件，并將其路徑或數(shù)據(jù)URI替換到樣式中。

.button {
  position: relative;
  font-size: 20px;
  color: #fff;
  background-color: #333;
  border: none;
  padding: 10px 20px;
  text-align: center;
  background-image: url('path/to/icon.png'); /* 替換為圖標(biāo)文件的路徑或數(shù)據(jù)URI */
}

兩種方法都可以實現(xiàn)按鈕上添加圖標(biāo)的效果，具體使用哪種方法取決于你的需求和設(shè)計，如果你需要更多的靈活性和可維護(hù)性，推薦使用偽元素方法；如果你需要更直觀和高效的方式，推薦使用背景圖像方法。