总结几个小图标实现方法

Posted 2020-09-28

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

（一）雪碧图

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