關于CSS中的li icon 在頁面設計中，常常需要對列表進行美化，其中一個常用的方式是使用icon作為列表項的符號。而CSS中的li icon就是用來實現這個功能的，下面我們來詳細了解一下。 1. 列表樣式 首先，我們需要了解CSS中li的默認樣式： ``` li { display: list-item; text-align: -webkit-match-parent; } ``` 默認情況下，li的樣式就是一個簡單的文字列表，每一項之間有一定的縮進。如果我們需要改變這個樣式，我們可以通過設置list-style屬性來實現。該屬性有三個值：list-style-type(列表項的符號類型)、list-style-image(列表項的符號圖片)和list-style-position(符號位置)。 2. 列表項如何添加icon 通過設置list-style-type屬性，我們可以將列表項的符號類型改變為各種不同的圖形，如實心圓圈、實心正方形、實心淺色菱形等。常用的符號類型有以下幾種： ``` ul { list-style-type: disc; /* ● 實心圓圈 */ list-style-type: circle; /* ○ 空心圓圈 */ list-style-type: square; /* □ 實心正方形 */ list-style-type: decimal; /* 1 2 3 普通數字列表 */ list-style-type: lower-roman; /* i. ii. iii. 小寫羅馬數字列表 */ list-style-type: upper-roman; /* I. II. III. 大寫羅馬數字列表 */ list-style-type: lower-alpha; /* a. b. c. 小寫字母列表 */ list-style-type: upper-alpha; /* A. B. C. 大寫字母列表 */ } ``` 除了這些標準的符號類型外，我們也可以使用自己的自定義符號類型。比如使用字體圖標中的圖標作為列表項符號。 ``` ul { list-style: none; } ul li:before { content: "\f105"; font-family: "Font Awesome 5 Free"; margin-right: 10px; } ``` 在這個例子中，我們先將ul的list-style設置為none，這會將列表項默認的符號類型去掉。然后利用:before偽元素為每個li添加自己的符號，使用content屬性設置符號為Font Awesome字體圖標庫中的"?"，設置font-family屬性為"Font Awesome 5 Free"，并設置margin-right屬性為10px來美化。 3. 總結 CSS中的li icon是一個非常有用的樣式技巧，通過改變列表項的符號類型，我們可以很容易地美化我們的頁面。而通過使用自定義符號，我們還可以實現更加絢麗的效果。在實際應用中，需要根據頁面需求合理地運用該技巧。