打开京东页面，你会发现有许多小的图标，其实他不是精灵图做的，而是一种字体图标！ 

这些小图标其实都是字体图标！

 

 

下面在京东这个小图标检查元素后发现，调整字体大小，图标就会跟着变大小，其实这个图标就是字体！ 

什么时候使用精灵图什么是时候使用字体图标呢？优缺点呢？ 

进入官网后，发现有许多的字体图标！ 

可以进行选择，选择后就可以下载了！ 

 

上面这一段代码直接引用就可以了！ 

点开 下载好的demo.html选择一个图标后面的正方块！如下图：

放入html结构中！ 

 给span一个css样式如下：

 效果很明显呀！地址图标就出现了！

既然是字体图标，也可以直接改变字体大小和颜色等等！ 

改后的效果很明显呀！ 

再加入一个，效果也是一样的！ 这个四方框不是刚才那个，找到是其他图标的后面的四方框呀！

结果很明显呀！ 

点击是就可以了！

 

a

下载Download 

 

加载的原理是浏览器不用一次一次的去发送请求了，直接一次把图标文件下载来了。直接在浏览器器中进行使用了。