阿里巴巴的矢量圖標之字體圖標

　　今天糾結了一下，每次一些頁面上面的小圖標，指引之類的東西，都須要我很費勁的去使用css或者摳圖去下載下來，我就在想，能不能有一個很棒的方法能讓我偷偷懶，直接就像字體圖標同樣，就可使用了，可是以前學的字體圖標的引用都有一個問題，就是我要在頁面加載一個文件包才能使用那個網站的字體圖標，這樣會很耗費流量，對用戶體驗很差，我就在想，能不能有一個挺棒的方法，讓我直接就能夠在網上加載那些圖標，而後我能夠隨意的使用~~~~沒有想到，還真是讓我給找到了，一個感受挺6的網站，那個就是阿里巴巴矢量圖標庫~~~~

　　在網上看了很久，它的使用說明，終於，在不斷的使用，失敗之中，我知道怎麼使用這個字體圖標了，除了字體圖標，還有字體之類的，等我研究出來，我再寫.。。。如今只介紹字體圖標

　　首先呢，要使用它這個字體圖標，你得先登陸，登錄很簡單，微博，還有域帳號？？就能夠登錄了，這裏我是用微博登錄的

　　而後呢，首先在圖標庫裏面找你須要的圖標，好比我想找一個喇叭的圖標 ，只須要在右上角輸入喇叭，搜索，不出意外的話，也沒有什麼意外啦，下面就有不少喇叭圖標出來了。。。

　　隨便點幾個，它會自動保存到暫存架那裏，保存的時候，你很容易的就能夠發現的暫存架的位置的 ，這裏我就懶得截圖了。。。等你找到須要的圖標以後 ，保存爲新的項目，這裏我這個項目的名字就測試，它會自動跳到你的圖標管理裏面，（若是沒跳轉，本身找圖標管理界面）而後點擊在線連接。。生成在線連接。

而後複製它的全部代碼，放在樣式裏面。。。。這裏要注意一個東西，我也弄了很久才弄好的，你直接複製到樣式裏面的話，它應該是下面的樣子的

在這裏有一個問題，咱們要在每個路徑前面加上http:如圖~~

這樣 才能正常的加載，這裏我弄很久的說。。。。

而後使用呢：

先聲明一個類，那個類的字體就是你定義的字體 如圖

大家能夠看到 iconfont 就是咱們本身在前面定義的字體。。。不懂？看前面複製的代碼，

 

而後有個小問題就是，由於這些圖標我通常都是在僞類裏面使用的；

僞類的使用有什麼好處呢，那就是咱們能夠減小，瀏覽器解析標籤的數量 ，

  

字體圖標的代碼是什麼呢，僞類裏面的content的代碼是屬於16進制的

而後你在e600前面加上\就能夠了（這個是僞類的用法）

若是你想直接在標籤裏面嗯    在那個圖標下面有~

就這樣，咱們能夠發現，你已經使用上了字體圖標。。。具體圖標在什麼位置，你能夠在僞類裏面定義它的樣式，這裏就不作介紹了。。。。