前言：页面总是时不时会出现小图标，就来总结一些自己知道的实现方法，应用情况依靠场景大家自行参考吧。
（一）雪碧图
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
特点：相对于单个小图标，它节省了文件体积和服务请求次数。主要是因为将所有的零碎的小图片整合在一起，可以有效的减少http对图片的请求次数，不需要多次加载零碎的背景图片，所以合理的利用它可以有效的提高网页的加载速度。
注意：您要预先确定每一个小图标的大小，知道图片与图片之间的距离。一般使用Photoshop或者fireworks等一些作图软件进行雪碧图制作。
网上查到几个可以制作雪碧图的工具，我还没试过，有兴趣的可以看看 ，下面是链接：
http://www.360doc.com/content/12/0802/05/21412_227764450.shtml
http://www.cnblogs.com/joyho/articles/3715260.html
（二）css伪类绘制ICON 使用css的 :after、:before、border、width、height、border-radius 等属性配合就可以制作一些小图标。
eg: HTML <div class="search-icon"></div>
CSS .search-icon{
color: #000;
position: absolute;
margin-top: 2px;
margin-left: 3px;
width: 12px;
height: 12px;
border: solid 1px currentColor;
border-radius: 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search-icon:before {
content: ‘‘;
position: absolute;
top: 12px;
left: 5px;
height: 6px;
width: 1px;
background-color: currentColor;
}
（三）字体图标
Font Awesome 字体可以提供可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用Css的样式。具体使用请详读官网，里面有实例可参考。
官网：
http://fontawesome.io/icons/ 英文网
http://www.fontawesome.com.cn/ 中文网
（四）canvas绘制
这个要用到HTML5语义化标签canvas和javascript进行配合，当然canvas还可以做动态动画等其他功能，这里只是想到这个方法。下面是一个板栗，画一个星星:
<canvas id="canvas">
当前浏览器不支持canvas，请更新浏览器后再试
</canvas>
<script type="text/javascript" lang="javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = "800";
canvas.height = "800";
var context = canvas.getContext("2d");
drawStar(context,150,300,400,400,10,"red","yellow",30);
};
function drawStar(cxt,r,R,x,y,borderWidth,borderColor,fillColor,rot){
cxt.beginPath();
for(var i=0; i<5; i++){
cxt.lineTo( Math.cos((18+i*72 - rot)/180*Math.PI)*R + x,
-Math.sin((18+i*72 - rot)/180*Math.PI)*R + y);
cxt.lineTo( Math.cos((54+i*72 - rot)/180*Math.PI)*r + x,
-Math.sin((54+i*72 - rot)/180*Math.PI)*r + y);
};
cxt.closePath();
cxt.fillStyle = fillColor;
cxt.strokeWidth = borderWidth;
cxt.strokeStyle = borderColor; cxt.fill();
cxt.stroke();
};
</script>
（五）SVG绘制
SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
SVG可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。由于SVG是XML文件，SVG图像可以用任何文本编辑器创建。
下面就画个园：
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="330" cy="70" r="60" stroke="green" stroke-width="3" fill="orange" />
</svg>
（六）其他的网上图库插件
这些我只是试用过，具体还请大家自己实践一下。
1）iconfont阿里巴巴矢量图标库
http://www.iconfont.cn/
2）icomoon
https://icomoon.io/ icomoon官网
https://icomoon.io/icons.html
http://icomoon.io/app/
3）easyicon
http://www.easyicon.net/
4）flaticon（Free vector icons - SVG, PSD, PNG, EPS & Icon Font）
http://www.flaticon.com/
5）在线ico转换、制作
https://www.ico.la/
结束语：以上是我现在能想到的方法，若是以后想到还会添加，如果哪里不对或者大家有更新奇的方法请积极留言哈，至于兼容性就请各位自己测试了，新属性有好多是不支持ie9以下版本的。
总结几个小图标实现方法
