ICON的几种实现方式

ICON的几种实现方式

<!--more-->

需求：一个页面上有很多小图标

###一，image

使用image来实现，要注意的问题：

1. img的大小设置
2. img的vertical-align
3. 请求数过多

代码举例：

<style type="text/css">
    img{
        height: 5px; /*根据需求写*/
        /*写完后发现icon的高度自使用，但是跟输入框有点对不齐，可以设置icon的vertical-align来调整使其对齐*/
        vertical-align: middle; /*也可能是top,bottom等。*/
    }
</style>

    <div class="search">
        <input type="text">
        ![](目标icon文件)
    </div>
    <div class="buy">
        <button>加入购物车</button>
        ![](目标icon文件)
    </div>

###二，CSS Sprites

线上精灵图合并地址

线上精灵图合并地址2

解决了image方法过多次的请求

• 缺点：无法缩放，不好修改

###三，Icon Font

把字体做成图标

1. 制作字体文件 iconfont网站

2. 声明font-family

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

3. 使用font-family

• 使用HTML实体
• 使用css: before。

###四，CSS Icon

用CSS画 css icon网站

###五，SVG

img=svg svg "sprites"