方法一：
用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"></i>
或者這樣
<i class="iconfont icon-zhuye-copy"></i>
優點：
加載速度快，字體大小及顏色方便修改
缺點：
收字體大小的影響，字體圖標顯示的效果會有明顯的鋸齒
方法四：
使用SVG。SVG是一種基於XML的圖形格式。這是一種可縮放的矢量圖形。SVG是由W3C制定的標准，在2003年成為了W3C的推薦標准。相比較其他的圖像格式，SVG的優勢在於：SVG可以被很多工具讀取和修改、SVG的尺寸更小、SVG圖像在任何的分辨率下都可以高質量地打印。
SVG的使用主要有如下方式：
1.img標簽直接引用
這種方式簡單，直接把SVG格式圖片看作為普通的圖片來引用。這種方式在實際的使用場景中應用不多。
2.內聯方式
IE9、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 標簽的開始。