總結幾個小圖標實現方法

前言：頁面老是時不時會出現小圖標，就來總結一些本身知道的實現方法，應用狀況依靠場景你們自行參考吧。

（一）雪碧圖

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