自定義iconfont 圖標庫下載本地在移動App的使用及svg彩色圖標

自定義iconfont 圖標庫擴展

在Hbuilder開發移動App的使用及svg彩色圖標(或mui圖標庫的自定義擴展)

前提準備：1.登陸阿里iconfont圖標庫，建立本身的項目，地址：http://www.iconfont.cn/；2.製做svg格式的圖標，並上傳至阿里圖標庫iconfont。

具體操做：

step1:  從阿里iconfont下載圖標本地包

step2: 從本地文件裏摘出iconfont.css，iconfont.ttf, iconfont.js三個文件，放入到本身的項目裏相應的位置

step3: 處理iconfont.css文件，不可直接使用。以下圖：

移動app僅留下下iconfont.ttf文件就可支持安卓和ios手機了。

@font-face {

　　font-family: "iconfont";

　　src: url('../fonts/iconfont.ttf') format('truetype');

}

注意：1. src:url() 語法不能出錯，2. 相對路徑的修改。

step4: iconfont.js 用於支持svg圖的渲染，沒有此文件不能使用svg的彩色圖標。

step5: 在頁面裏引入這三個文件便可使用。

 

 

另見，iconfont 入門： http://www.cnblogs.com/alice-fee/p/6106635.html