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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM