iconfont.cn阿里巴巴矢量圖下載字體圖標實戰

一、阿里巴巴矢量圖網址：www.iconfont.cn

二、而後用新浪微博帳號登陸

三、輸入要查找的圖標相應的關鍵字，回車

四、滑過要找的圖標，點擊購物車，讓圖標存儲到暫存架中

五、點擊暫存架，存儲爲新的項目

六、輸入項目名，就會跳轉到項目管理界面

七、而後點擊下載到本地就會生成一個iconfont.zip的文件包

八、解壓後，將iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff等幾個字體文件複製到真實的項目環境css目錄(與iconfont.css中複製出來的代碼同級)中

九、並將iconfont.css中的代碼copy到真實項目的css文件中

十、在真實項目頁面上須要引用該字體圖標的地方，加上class="iconfont"這個類

十一、而後打開解壓後的demo.html,看到字體圖標對應的編碼是相似這樣的編碼，一個編碼對應一個字體圖標

十二、像這樣引用進去就可使用圖標效果了<i class="iconfont">&#xe600;</i>

1三、還能夠直接引用字體圖標編碼下的類名也能夠：<i class="iconfont shouye"></i>

 注：字體圖標的大小能夠在.iconfont樣式裏面經過font-size:更改

高級實戰經驗：

一、不管下載幾個字體圖標，.iconfont這樣的字體類只需引用一次

.iconfont {
  font-family:"iconfont" !important;
  font-size:22px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

注意：若是還想修改圖標顏色之類，只須要.iconfont 後面加個自定義類覆蓋.iconfont上面的樣式便可

二、解壓後，將iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff等幾個字體文件複製到真實的項目環境中，每一個字體圖標的這幾個字體文件必須都得複製進去，在css目錄中建一個font（或在images中創建，或單獨創建）目錄，專門分門別類的來放這些個字體文件，如：在font中建一個search目錄放入這四個字體文件，同時建一個doc目錄放另外的文檔圖標的四個字體文件；

三、接着2講，分別放置好字體文件後，怎麼引用才能區隔開這些個字體圖標呢，引用路徑是關鍵

@font-face {font-family: "iconfont";
  src: url('../css/font/search/iconfont.eot?t=1466414304'); /* IE9*/
  src: url('../css/font/search/iconfont.eot?t=1466414304#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../css/font/search/iconfont.woff?t=1466414304') format('woff'), /* chrome, firefox */
  url('../css/font/search/iconfont.ttf?t=1466414304') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../css/font/search/iconfont.svg?t=1466414304#iconfont') format('svg'); /* iOS 4.1- */
}

看到上面的代碼沒，每一個字體圖標的@font-face樣式也是要單獨引用進來的，每一個url後面的路徑就是你放置字體文件的目錄路徑了。