隨著網站的飛速發展，越來越多的人都喜歡用圖標來裝飾自己的網頁，那么今天我們就來介紹一下如何使用CSS來為網頁標簽加上圖標。

/* 首先，我們需要加上font-family，并且引入我們的圖標字體文件 */
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf') format('truetype');
}
/* 接著我們定義一個類名，選擇器使用:before偽元素加上content屬性 */
.icon {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before {
font-family: 'iconfont' !important;
display: inline-block;
vertical-align: middle;
font-size: inherit;
font-style: normal;
line-height: 1;
text-align:center;
speak:none;
margin: 0;
padding: 0;
}
/* 這里是我們添加圖標的關鍵代碼 */
.icon-home:before {
content: "\e600";
}
/* 最后，我們在html中使用該類名和具體的圖標名稱 */

上述代碼主要包括三個部分，首先是引入圖標字體文件并設置字體，接著定義一個類名，使用:before偽元素來為每個標簽添加圖標，并最后在HTML中使用該類名和具體的圖標名稱來顯示圖標。

總結起來，使用CSS給網頁標簽加上圖標并不難，在代碼實現上只需要引入圖標字體文件，定義類名和圖標名稱，并在HTML中使用即可。這種方法可以讓網頁更加豐富和美觀，給用戶帶來更好的視覺體驗。