CSS圖標是一種常用的網頁設計元素，可以為網站增加良好的美觀度和信息傳遞能力。使用純CSS實現圖標可避免圖像加載、縮放等繁瑣問題，同時還能縮短網頁加載時的時間。以下是加入CSS圖標的幾個基本方法：

.icon {
font-size: 20px;
}

上述代碼基本實現了圖標的大小設置。設置成合適的值后，就可以開始添加圖標了。以下假定希望添加一個圖標“home”，下面是添加方法：

home

在span標簽中添加“icon”是為了讓瀏覽器知道這是一個圖標，其實任何一個標簽都行。在span標簽中輸入要添加的圖標名稱即可完成添加。

上述添加方法缺點在于不同瀏覽器對不同的字體和字體文件的支持不同。想要更好的瀏覽器兼容性，可以使用字體庫。常見的字體庫有FontAwesome和Ionicons，在網站中使用的話，需要先引入相關文件：

以上是FontAwesome的引入方法，Ionicons也類似。引入后可以像下面這樣使用：

其中，fa是Fontawesome圖標庫的前綴，后面接具體的圖標名稱即可。同理，Ionicons也有類似的前綴ion，使用方法也基本相同。