CSS是一種用于控制網頁外觀和格式的語言。它可以幫助我們實現很多網頁設計上的功能，其中之一就是使用Icon圖標。Icon圖標是一種小圖片，可以為網頁增加美觀度和可讀性。接下來，我們將學習如何使用CSS來添加Icon圖標。 首先，在HTML文檔中添加一個鏈接標記，指向Icon圖標的路徑：

<link rel="icon" type="image/png" href="icon.png">

在這個例子中，我們將Icon圖標文件命名為“icon.png”，并用“link”標記將其鏈接到HTML文檔中。注意文件類型必須指明為“image/png”。 接下來，在CSS樣式表中定義一個類來處理Icon圖標：

.icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('icon.png');
}

這個類稱為“icon”，它包含四個屬性：“display”，“width”，“height”和“background-image”。 “display”屬性用于指定元素的布局方式。在這個例子中，我們將它設為“inline-block”，表示該元素既可以作為塊級元素使用，也可以和文本一樣排列。 “width”和“height”屬性用于設置Icon圖標的大小。在這個例子中，它們被設置為16像素。 最后，“background-image”屬性用于指定Icon圖標的路徑。請注意，圖像路徑必須是相對于CSS文件的路徑。在這個例子中，我們使用相同的文件名“icon.png”。 一旦定義了Icon圖標類，我們可以在HTML文檔中使用它：

<p>這是一個包含<span class="icon"></span>的段落。</p>

這個HTML文本包含一個“p”標記和一個“span”標記。在“span”標記中，我們使用了“icon”類來顯示Icon圖標。可選的文本可以放置在“span”標記之間。 在這個例子中，Icon圖標被設置為16像素，但你可以根據需要修改“width”和“height”屬性來調整其大小。 總之，使用CSS添加Icon圖標是一個簡單而有效的方法來增強網頁設計。只需遵循上面的步驟，就可以為您的網頁添加美觀的圖標！