CSS圖標可以在網頁設計中起到非常重要的作用。不僅可以美化頁面，更可以提高用戶體驗。下面就介紹一下如何建立CSS圖標。

.icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
}

首先，我們需要設置樣式的基本屬性。例如上面所示的代碼，我們定義一個.icon類，其中包括display屬性為inline-block，width和height屬性為20px，背景顏色為#333，還設置了border-radius為50%。這些樣式可以根據自己的需求進行調整。

.icon::before {
content: '';
display: block;
width: 10px;
height: 10px;
margin: 5px;
background-color: white;
border-radius: 50%;
}

接著，我們需要為圖標本身添加一些樣式。上面的代碼通過偽元素::before為.icon添加了一個白色的圓形圖標。其中，通過content屬性為偽元素添加一個空字符串，并設置display為block，width和height為10px，margin為5px，背景顏色為白色，border-radius為50%。

.icon:hover::before {
box-shadow: 0px 0px 5px gray;
}

最后，我們可以通過:hover偽類為圖標添加一些交互效果，以增加用戶體驗。例如上面的代碼，我們為.icon:hover::before添加了一個陰影效果，當鼠標懸停在圖標上時，就會顯示出一個灰色的圓形陰影。

通過以上幾個步驟，就可以輕松地建立一個簡單的CSS圖標了。你可以根據需要添加更多的樣式來滿足自己的設計需求。好了，趕快使用CSS圖標來美化你的網站吧！