CSS 顯示小圖標(biāo)是為了美化界面效果,增加用戶體驗(yàn)。下面是實(shí)現(xiàn)方法:
.icon { background-image: url("icon.png"); width: 20px; height: 20px; display: inline-block; }
上述代碼中,.icon 表示樣式名,可以根據(jù)需求自定義。background-image 屬性引用了小圖標(biāo)的地址。使用 inline-block 設(shè)置樣式的顯示方式。這里設(shè)置了寬度和高度,可以根據(jù)實(shí)際需求進(jìn)行修改,最后設(shè)置 display 屬性。
在 HTML 中使用即可:
<p>這是一段文字,<span class="icon"></span> 這里顯示圖標(biāo)</p>
使用 span 標(biāo)簽包括了樣式名,圖標(biāo)將會在其位置顯示。