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