需求:一個頁面上有很多小圖標(biāo)
一梦湘,image
使用image來實現(xiàn),要注意的問題:
- img的大小設(shè)置
- img的vertical-align
- 請求數(shù)過多
代碼舉例:
<style type="text/css">
img{
height: 5px; /*根據(jù)需求寫*/
/*寫完后發(fā)現(xiàn)icon的高度自使用翼雀,但是跟輸入框有點對不齊徒探,可以設(shè)置icon的vertical-align來調(diào)整使其對齊*/
vertical-align: middle; /*也可能是top,bottom等葬荷。*/
}
</style>
<div class="search">
<input type="text">
icon文件)
</div>
<div class="buy">
<button>加入購物車</button>
icon文件)
</div>
二坑夯,CSS Sprites
解決了image方法過多次的請求
- 缺點:無法縮放岖寞,不好修改
三,Icon Font
把字體做成圖標(biāo)
制作字體文件 iconfont網(wǎng)站
聲明font-family
- 使用本地鏈接
- 使用第三方鏈接
- 使用font-family
- 使用HTML實體
- 使用css: before柜蜈。
四仗谆,CSS Icon
用CSS畫
css icon網(wǎng)站
五,SVG
img=svg
svg "sprites"