CSS 是前端開發中不可或缺的一部分，可以控制網頁布局、字體、顏色等各種元素。在制作帶小圖標的列表時，CSS 可以大大的減少我們的代碼量，并能使頁面效果更加美觀。

首先，我們需要準備一個包含小圖標的圖標字體。例如 FontAwesome。在這個字體庫中，有許多不同樣式、大小、顏色的圖標，只需要在 CSS 中引入即可。

<!-- 引入 FontAwesome -->
<link rel="stylesheet"  integrity="sha512-iaxaYTx1eVDSiFgKQgnV/GPvDvX8V7Ku4iJotV7dyRVwNd65sWfapJyfkjKz7ahqLtc76dW7xLYh/JTttKrpLw==" crossorigin="anonymous" />

接著，我們使用 CSS 中的 ::before 偽元素來添加小圖標。::before 會在每個列表項前添加一個偽元素，作為小圖標位置的占位符。然后使用 font-family 屬性使其顯示為我們引入的圖標字體中的一個。根據需要來調整字體大小、顏色等屬性。

ul li::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-size: 14px;
color: #333;
margin-right: 5px;
}

最后，我們可以按照正常的 ul li 列表樣式來設置每個列表項的樣式，例如調整字體、顏色、間距等。

ul li {
font-size: 16px;
color: #333;
margin: 10px 0;
}

通過上述步驟，我們就能夠輕松地在列表中添加小圖標，讓頁面效果更加立體、美觀。