想必現(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ì)大家有所幫助。