CSS Sprite

一般情況下，需要儲存為PNG-24的檔案格式。

先確定好小圖示的大小，再根據小圖示的大小來擺放小圖示。

清除瀏覽器預設樣式（並引入事先準備好的CSS檔案）：<link rel="stylesheet" href="css/ ">

利用background-image屬性引入小圖示，然後用background-position屬性定位到要顯示的位置。

font+HTML

https://icomoon.io（圖示庫）
提供簡單編輯小圖示的功能，如果想創作新的字型圖示，只能通過專業的向量圖形軟體（可上傳到圖示庫中（SVG格式））

先從im網站上下載所需要的圖示，並將fonts資料夾拷貝到網頁所在的資料夾中，其中有4種字型檔案格式，由於每種字型對瀏覽器支援的程度不一樣，必須同時引入這些字型檔案。

在CSS中輸入：

@font-face{
font-family:自定義字型名稱;
src:引入自定義字型檔案路徑;
font-weight:
font-size:
}

eg.

@font-face{
            font-family:"imooc-icon";
            src:url(../fonts/icomoon.eot) format("embedded-                           opentype")
            ,url(../fonts/icomoon.woff) format("woff")
            ,url(../fonts/icomoon.ttf)
 
 format("truetype")
            ,url(../fonts/icomoon.svg) format("svg");
            font-weight: normal;
            font-style: normal;
          }

再回到html結構，複製小圖示的class名稱，回到CSS樣式表中：

.imooc-icon{
            font-family:"imooc-icon";
            font-style: normal;
            font-weight: normal
 
;
            font-size: 64px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:gray-scale;
        }

開啟之前下載的圖示檔案中的demo檔案，複製小圖示的16進位制編碼，貼上到HTML結構中小圖示對應的標籤對裡面，並在16進位制數字前面加上 &#x 即可。

解決在IE8及以下瀏覽器中無法載入字型圖示的問題：

@font-face{
            font-family:"imooc-icon";
            src:url("../fonts/icomoon.eot");/*IE9相容模式*/ 
            src:url("../fonts/icomoon.eot?#iefix") format("embedded-                           opentype")
            ,url("../fonts/icomoon.woff") format("woff")
            ,url("../fonts/icomoon.ttf") format("truetype")
            ,url("../fonts/icomoon.svg") format("svg");
            font-weight: normal;
            font-style: normal;
          }

font+CSS

將小圖示對應的HTML程式碼通過CSS屬性寫入樣式檔案，然後呼叫class名稱即可。

:before偽元素: 建立一個虛假的元素，並插入到目標元素內容之前。
content屬性: 與:before及:after偽元素配合使用，來插入生成內容。

@font-face{
            font-family:"imooc-icon";
            src:url("../fonts/icomoon.eot");/*IE9相容模式*/ 
            src:url("../fonts/icomoon.eot?#iefix") format("embedded-                           opentype")
            ,url("../fonts/icomoon.woff") format("woff")
            ,url("../fonts/icomoon.ttf") format("truetype")
            ,url("../fonts/icomoon.svg") format("svg");
            font-weight: normal;
            font-style: normal;
          }


.imooc-icon{
            font-family:"imooc-icon";
            font-style: normal;
            font-weight: normal;
            font-size: 64px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:gray-scale;
        }

開啟demo檔案，用它給出的名稱作為class名稱，開啟CSS樣式

.icon-envelop:before{
            content: "\e900";

接著就可以給小圖示使用該class名稱。

其它

開啟demo檔案，檢視原始碼，開啟樣式檔案，就可以直接用im應用幫我們生成好的程式碼，把這些樣式拷貝到專案中即可