簡單介紹一下阿里巴巴矢量圖標庫的使用

相信作過前端的都知道阿里巴巴矢量圖標庫，這是一個很是好用的添加小圖標的方法，並且是徹底免費的，能夠在線使用也能夠下載到本地使用，並且圖標是做爲字體插入，不只能夠改變顏色大小，並且在佈局方面也很是方便。下面我就來介紹一下阿里巴巴矢量圖標庫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">&#x33;</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;
}

對，就是得設置樣式，要不沒有辦法顯示，咱們在要修改圖標顏色大小時也要注意權重問題。

今天就說到這裏，但願能給你們幫助~