CSS中的Icon指的是網頁中所用的圖標，它可以作為頁面內容的輔助展示，使頁面更加美觀，同時也可以傳達出更多信息。這篇文章將介紹如何在CSS中使用Icon。

首先，我們需要為我們的網頁選擇一組合適的Icon，可以選擇字體圖標或者SVG圖標。字體圖標使用字體文件來呈現，使用簡單方便，但是需要引入字體文件。SVG圖標是矢量圖形，可以直接使用，不需要額外引用文件。

//使用字體圖標
@font-face {
font-family: 'iconfont';
src: url('./icon/iconfont.eot');
src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'),
url('./icon/iconfont.woff2') format('woff2'),
url('./icon/iconfont.woff') format('woff'),
url('./icon/iconfont.ttf') format('truetype'),
url('./icon/iconfont.svg#iconfont') format('svg');
}
.icon {
font-family: 'iconfont';
font-size: 20px;
color: #aaa;
}
//使用SVG圖標
.icon {
width: 20px;
height: 20px;
background: url('./icon/icon.svg') no-repeat;
}

使用字體圖標時，先引入字體文件，然后在CSS中設置字體名稱，就可以在頁面中使用Icon了。每個Icon對應一個Unicode編碼，我們只需要在HTML中添加對應編碼的字符串，就可以顯示出對應的圖標了。



使用SVG圖標時，我們需要設置Icon的寬度和高度，并將Icon文件作為背景。可以使用Sprite技術，將多個Icon組合成一個文件，減少HTTP請求。

.icon {
width: 20px;
height: 20px;
background: url('./icon/sprite.svg') no-repeat;
background-position: -20px -20px;
}

使用Icon時，還需要注意一些細節問題。首先是Icon的大小和顏色應該和頁面風格保持一致，在使用時需要注意。其次是如果使用的Icon樣式庫，需要注意樣式名稱和Icon名稱的對應關系。

總的來說，CSS中的Icon可以給頁面增加裝飾性，同時也可以傳達更多信息，是網頁中不可缺少的元素。