CSS3的強大功能使得我們可以對網頁進行更加豐富的設計。這其中，li元素圖標的設計也得到了更好的展示。下面我們來學習一下如何利用CSS3來實現li元素圖標的設計。

/* 使用偽元素:before來設置圖標 */
li:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
background: url("icon.png") no-repeat;
}
/* 注意：在設置偽元素時，需要設置content屬性，否則偽元素將不會起作用 */
/* 設置不同樣式的圖標 */
li.email:before {
background: url("email.png") no-repeat;
}
li.chat:before {
background: url("chat.png") no-repeat;
}
/* 修改默認樣式的圓點 */
ul {
list-style-type: none; /* 取消默認圓點 */
}
/* 改為自定義圖標 */
li:before {
content: "●"; /* unicode中的實心圓點 */
margin-right: 10px;
color: #c00; /* 設置顏色 */
font-weight: bold; /* 加粗 */
}

通過上述代碼，我們可以輕松地設置li元素的圖標樣式。其中，我們使用了:before偽元素來實現圖標的添加，在:before中通過設置content、display、width、height、margin等屬性來設置圖標的樣式。如果是需要設置多種類型的圖標，可以借助偽元素的class屬性來區分，然后在CSS樣式表中進行設置不同的背景圖片。