需求：一個(gè)頁(yè)面上有很多小圖標(biāo)

一，image

使用image來(lái)實(shí)現(xiàn)，要注意的問(wèn)題：

1. img的大小設(shè)置
2. img的vertical-align
3. 請(qǐng)求數(shù)過(guò)多

代碼舉例：

<style type="text/css">
    img{
        height: 5px; /*根據(jù)需求寫(xiě)*/
        /*寫(xiě)完后發(fā)現(xiàn)icon的高度自使用，但是跟輸入框有點(diǎn)對(duì)不齊，可以設(shè)置icon的vertical-align來(lái)調(diào)整使其對(duì)齊*/
        vertical-align: middle; /*也可能是top,bottom等。*/
    }
</style>

    <div class="search">
        <input type="text">
        ![](目標(biāo)icon文件)
    </div>
    <div class="buy">
        <button>加入購(gòu)物車</button>
        ![](目標(biāo)icon文件)
    </div>

二，CSS Sprites

線上精靈圖合并地址

線上精靈圖合并地址2

解決了image方法過(guò)多次的請(qǐng)求

• 缺點(diǎn)：無(wú)法縮放，不好修改

三，Icon Font

把字體做成圖標(biāo)

1. 制作字體文件 iconfont網(wǎng)站

2. 聲明font-family

• 使用本地鏈接
• 使用第三方鏈接

3. 使用font-family

• 使用HTML實(shí)體
• 使用css: before。

四，CSS Icon

用CSS畫(huà)
css icon網(wǎng)站

五，SVG

img=svg
svg "sprites"