总结几个小图标实现方法

前言：页面老是时不时会出现小图标，就来总结一些本身知道的实现方法，应用状况依靠场景你们自行参考吧。

（一）雪碧图

       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如下版本的。