在進行網頁設計時，我們常常需要使用一些圖標來美化頁面，比如常見的箭頭、放大鏡、購物車等。在實現這些功能時，我們可以使用CSS圖標，并將它們放置在文字的上方，增加網頁的美觀性和易讀性。

.icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-image: url("icon.png");
background-size: 100%;
}

上述代碼是一個CSS圖標的基本樣式，其中我們將圖標設置為行內塊并垂直居中，同時指定了圖標的寬高和背景圖像，通過調整寬高可以對圖標進行縮放，而通過更換背景圖像，我們可以輕松更換不同風格的圖標。

同時，我們需要將圖標與文字進行整合，這可以通過創建一個包含文字和圖標的容器來實現：

搜索

上述代碼中，我們通過兩個元素來實現文字和圖標的結合。首先，我們將文本放置在一個 span 標簽中，然后將圖標放在一個 i 標簽中。通過適當調整樣式，我們可以實現圖標位于文字的上方、下方、左邊或右邊，以滿足不同的設計需求。

總之，CSS圖標是一種簡單而有效的網頁設計工具，可以將圖標與文字結合，美化頁面布局，提升用戶體驗。