CSS圖標與文字按鈕是網(wǎng)頁設計中常用的元素，能夠為網(wǎng)頁增添視覺和交互效果，為用戶提供更好的使用體驗。在這篇文章中，我們將介紹如何使用CSS來實現(xiàn)這些功能。

CSS圖標通常是使用font-family中的字體圖標實現(xiàn)的，例如Font Awesome和Material Icons。在CSS代碼中，我們可以使用:before和:after偽類來定義這些圖標的樣式。

.icon:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

在這段代碼中，我們給.icon元素的:before偽類定義了content（圖標的unicode編碼），font-family（使用的字體），和font-weight（字體的粗細）。

文字按鈕與圖標類似，也可以使用:before和:after偽類來定義樣式。

.btn:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 5px;
}

在這段代碼中，我們?yōu)?btn元素的:before偽類定義了content、font-family和margin-right（圖標和文字之間的間距）。

除了使用font-family中的字體圖標，我們還可以使用SVG圖標。在這種情況下，我們可以在HTML代碼中使用標簽，也可以使用CSS的background-image屬性。

.btn {
background-image: url("icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding-left: 30px;
}

在這段代碼中，我們?yōu)?btn元素設置了背景圖像，并使用background-repeat、background-position和background-size屬性來調整圖像的顯示效果。我們還使用padding-left來為圖像留出空間，使得文字和圖像之間有一定的距離。

總之，CSS圖標和文字按鈕是網(wǎng)頁設計中非常常見的元素，可以為網(wǎng)頁增添視覺和交互效果。通過使用CSS的:before和:after偽類以及background-image屬性，我們可以輕松實現(xiàn)這些功能。