web常見幾種處理圖標方法

方法一：

用background製做小圖標

像這樣，拿到設計稿後把全部的圖標放在一張圖片上，利用background-position、width、height來控制圖標的位置及大小。

代碼：

.icon{display:inline-block;background:url(../images/icon.png);}
.icon1{background-position:0 0;width:16px;height:16px;background-repeat:no-repeat;position:absolute;top:6px;right:6px;}
.icon2{background-position:-20px 0;width:41px;height:18px;margin:10px;}
.icon3{background-position:-29px -41px;width:17px;height:9px;margin-left:10px;}
.icon4{background-position:0 -21px;width:62px;height:14px;}
.icon5{background-position:-65px 0;width:49px;height:49px;margin-top:5px;}

引用時：

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>
<i class="icon icon4"></i>
<i class="icon icon5"></i>

優勢：

圖片做爲背景來顯示圖標，圖標的效果好，不容易出現鋸齒

缺點：

圖標大小及顏色難以控制，特別是調響應式時，大部分適用於pc端網站開發，移動端不建議適用

 

---

 

方法二：

簡單的圖標可用css繪製，好比：

<i class="box"> <s class="ico"></s></i>

.box{
    display: block;
    width: 200px;
    height: 20px;
    background: gold;
    overflow: hidden;
    position: relative;
    top: 100px;
    left: 200px;/*控制小三角的位置*/
}
.ico{
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border:5px solid #000 ;
    position : absolute;
    top:30px;
    left:20px;;
}

*也可使用僞元素:before/:after輔助繪製

優勢：

比上一種方法節省空間，加載速度快

缺點：

大小很差控制，圖標僅限於簡單的，不能完成複雜的圖標繪製

 

---

 

方法三：

經常使用的字體圖標，例如像阿里圖標、Font Awesome等，以阿里圖標爲例：

將你想要的圖標加入庫，點擊右上角的購物車形狀的圖標，彈出以下圖效果：

添加至你須要的項目裏面，而後再到圖標管理-》個人項目裏面去把剛下加入的圖標下載至本地：

把下載的解壓後，在你的項目裏面新建個fonts的文件夾，把以下文件放進去：

在你的樣式文件中引用改字體圖標：

@import url("iconfont.css");

在須要調用這個圖標的地方插入html：

 <i class="iconfont">&#xe603;</i>

或者這樣

<i  class="iconfont icon-zhuye-copy"></i>

優勢：

加載速度快，字體大小及顏色方便修改

缺點：

收字體大小的影響，字體圖標顯示的效果會有明顯的鋸齒

 

---

 

方法四： 

使用SVG。SVG是一種基於XML的圖形格式。這是一種可縮放的矢量圖形。SVG是由W3C制定的標準，在2003年成爲了W3C的推薦標準。相比較其餘的圖像格式，SVG的優點在於：SVG能夠被不少工具讀取和修改、SVG的尺寸更小、SVG圖像在任何的分辨率下均可以高質量地打印。

SVG的使用主要有以下方式：

1.img標籤直接引用

這種方式簡單，直接把SVG格式圖片看做爲普通的圖片來引用。這種方式在實際的使用場景中應用很少。

2.內聯方式

IE九、Firefox、Opera、Chrome及Safari都支持內聯的SVG。IE8及如下版本瀏覽器能夠經過安裝插件來支持SVG。內聯的SVG直接做爲HTML文檔的一部分，不須要單獨請求。內聯的SVG使用上很不方便，若是在HTML中加入大段的SVG代碼，則很難維護，代碼也沒法複用。

3.Data URIs

這種方式是把SVG文件直接轉成base64編碼格式，而後以Data URIs的方式引用。示例代碼以下：

.icon{
  background: url(data:text/svg+xml;base64,<base64 encoded data>)
}

 

4.使用SVG中的<symbol>元素

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="circle-cross" viewBox="0 0 32 32">
    　　<title>circle-cross icon</title>
    　　<path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>

    <symbol id="circle-check" viewBox="0 0 32 32">
      　　<title>circle-check icon</title>
      　　<path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>

    <!-- .... -->
</svg>

 

使用 id 引用這個 SVG 中的 Icon 有兩種方式：

將上述 SVG 做爲 body 的第一個元素插入在 HTML 中而後：

<svg class="icon">
  <use xlink:href="#circle-cross"></use>
</svg>

或者，講SVG保存成文件，以地址方式引用：

<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>

這種方式使用上跟img標籤沒有什麼太大的差異了。好處在於全部的圖標都在一個文件中，所以只會請求一次。 這種不須要像 Sprite 那樣繁瑣的設置圖片的位移。使用 id 命名圖標並使用時直接使用 id 引用既直觀又簡單。 其靈活性和 Inline SVG 幾乎同樣——你能夠設置顏色、邊線樣式、大小等等。 視瀏覽器的不一樣，有時你須要使用做爲 SVG 標籤的開始。