自定義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
