相信做過前端的都知道阿里巴巴矢量圖標庫，這是一個非常好用的添加小圖標的方法，而且是完全免費的，可以在線使用也可以下載到本地使用，而且圖標是作為字體插入，不僅可以改變顏色大小，而且在布局方面也非常方便。下面我就來介紹一下阿里巴巴矢量圖標庫Iconfont。
網址：http://www.iconfont.cn/plus
Iconfont之前只包括官方圖標庫和所有圖標庫，現在改版又多了個多色圖標庫，這個暫時沒用過，用過再來講，這里我一般都選所有圖標庫。
點進去之后在上面有一個搜索框，可以輸入關鍵字搜索，比如輸入：“主頁”，就會出現代表主頁的圖標;這個圖標會有很多，大家要注意是線條的還是填充的。
找到你想要的圖標之后你可以有三種選擇：
第一，將想要的圖標保存成圖片格式下載到本地，一般有三種格式，SVG下載，AI下載，ＰＮＧ下載;
SVG格式是可縮放的矢量圖形，用來定義用於網絡的基於矢量的圖形;因為圖像是矢量圖，在改變尺寸時圖形質量不會有所損失;
AI格式是指在Adobe Illustrator的軟件中制作的矢量圖，但是只能在特定軟件中打開，也可在PS中打開,不過打開后顯示的不是矢量圖，而是位圖，不是用於設計的一般用不上;
所以較為常用的是存儲為PNG格式，作為圖片插入；
第二：當你需要下載多個小圖標時，將選好的圖標統一加入購物車，加入購物車后點擊下載代碼，就可以下到本地使用了。這一步從前不需要登錄，但是現在改版了，需要先登錄才可以操作，然后它有一個缺點，就是如果你想要添加幾個圖標的話需要重新下載所有的，當然，也不是沒有解決辦法辦法的，可以下載新的之后，在css文件夾里再創建一個文件夾，在里面再寫一個css外聯樣式表用來操作新的小圖標，不過這樣似乎有點勞師動眾，而且文件夾里再嵌套文件夾，對網頁性能也是有影響的；所以如果你不是非要下載到本地的話，可以嘗試第三種方法。
使用時，將打包后的zip包解壓，里面有三個html文件，打開，里面是在本地使用的三種方法（之前只有Unicode），大家可以在瀏覽器中打開，按照步驟操作，把里面的兩大段代碼拷貝到css文件中，然后就不需要再動他們了，這里要說一下，在進行下面操作之前需要先把解壓后文件除了開頭字母為demo的幾個文件外，其他的都拷貝到css文件夾根目錄，確保你在使用時能調到這幾個文件（可能有些不是必須，但我比較懶，就都拷貝了）；這樣基本就完成了，你想在頁面哪里使用，只要在demo里獲取Unicode碼，替換<i class="iconfont">3</i>中間的就可以了。
第三，當你登錄阿里巴巴矢量圖標庫之后，可以在加入購物車之后選擇添加至項目，就可以添加到你在圖標庫中的項目里，然后在圖標管理，我的項目里可以查看，然后點擊查看在線鏈接，把鏈接的那段代碼添加到你的css文件中，就可以在線使用你的項目中的圖標了，再添加時只需要重新獲取鏈接就可以了；不過我在做這個的時候發現圖標並沒有出現，而是出現了兩個小框框，后來經過一系列慘烈的虐心嘗試，找到了解決辦法：（1）本地測試的時候要放在服務器里 ；（2）要在css文件里添加一段代碼 ：
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
對，就是得設置樣式，要不沒有辦法顯示，我們在要修改圖標顏色大小時也要注意權重問題。
今天就說到這里，希望能給大家幫助~