在CSS中設(shè)置小圖標(biāo),我們可以使用多種方法,以下是一種常見的方法,使用CSS的偽元素和背景圖像來(lái)實(shí)現(xiàn)。
我們需要在HTML中創(chuàng)建一個(gè)包含小圖標(biāo)的元素,例如一個(gè)div
元素,我們可以使用CSS為該元素添加偽元素,例如::before
或::after
,并將背景圖像設(shè)置為小圖標(biāo)。
以下是一個(gè)示例CSS代碼,用于將一個(gè)名為icon.png
的小圖標(biāo)添加到div
元素的左側(cè):
div { position: relative; } div::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background-image: url("icon.png"); background-size: contain; }
在上面的代碼中,div
元素被設(shè)置為相對(duì)定位,以便其偽元素可以相對(duì)于它進(jìn)行定位,偽元素::before
被設(shè)置為***定位,并放置在div
元素的左側(cè),它的寬度和高度都被設(shè)置為20像素,以適應(yīng)小圖標(biāo)的大小,背景圖像icon.png
被設(shè)置為小圖標(biāo)的來(lái)源,并使用background-size
屬性將其大小調(diào)整為適應(yīng)偽元素的大小。
通過(guò)這種方式,我們可以在CSS中輕松地設(shè)置小圖標(biāo),并將其添加到任何需要的位置。