想必現(xiàn)在有很多小伙伴對(duì)于怎么用i標(biāo)簽做小圖標(biāo)方面的知識(shí)都比較想要了解，那么今天小好小編就為大家收集了一些關(guān)于怎么用i標(biāo)簽做小圖標(biāo)方面的知識(shí)分享給大家，希望大家會(huì)喜歡哦。

首先我們?cè)趆tml里生成一個(gè)空的i標(biāo)簽，添加一個(gè)樣式icon。

在樣式定義上，我們關(guān)鍵要設(shè)置display樣式為block，或inline-block，這樣才可以設(shè)置長(zhǎng)度和寬度，如果不這樣設(shè)置，空標(biāo)簽i是一個(gè)行元素，沒(méi)內(nèi)容是不顯示出來(lái)的。

接著就是使用background-image的樣式來(lái)為這個(gè)標(biāo)簽添加背景圖了，背景圖可以是各種格式的圖片，不過(guò)小圖標(biāo)圖片一般都是使用gif或png的格式更好。

刷新頁(yè)面，可以看到現(xiàn)在的i標(biāo)簽已經(jīng)顯示出一個(gè)小圖標(biāo)了，但小圖標(biāo)的圖片過(guò)大，現(xiàn)在只顯示出了一部分。

我們可以使用background-size樣式來(lái)設(shè)置背景圖的大小。

設(shè)置后，能完整顯示出整個(gè)圖片了。但現(xiàn)在這個(gè)圖標(biāo)重復(fù)顯示在標(biāo)簽里了。

要解決重復(fù)顯示圖片的問(wèn)題，我們可以使用background-repeat樣式no-repeat，讓圖片不重復(fù)顯示。

再次看頁(yè)面，現(xiàn)在能正常顯示出一個(gè)小圖標(biāo)了。

本文到此結(jié)束，希望對(duì)大家有所幫助。