前言:
目前正在通過 UNI-APP平台開發移動應用,uni-app平台是去年年出才創建的一個新品台,因此資源相對比較匱乏,在此遇到一個問題,一直使用別人提供的iconfont,但總是不夠用,為了解決這個問題,花了些時間給自己也搞了個字體庫,如何操作,請看下文。
准備:
阿里巴巴提供資源網址:https://www.iconfont.cn/
參考文檔:
https://www.cnblogs.com/xguoz/p/10245641.html
操作:
一、進入網站(長得就是下圖這個樣子):
二、搜索自己需要的資源,並添加到自己的項目當中。
1. 項目在哪,看下圖,如果沒有項目自己可以快速創建一個項目,項目我的理解就是一個分類的文件夾。
2. icon怎么添加到項目中。
點擊圖標 -> 加入庫 -> 添加到項目。
三、打開我的項目:
1、點擊下方的 " 下方新icon....." 紅色字體,生成字體代碼。
2、選擇Unicode。
3、下載到本地。
4、下載的資源解壓打卡,拷貝 "iconfont.css"到你們項目中。
5、將iconfont.css中的 @font-face 替換成網絡資源,//at 前全部替換成 https: //at........,如下圖,保存。
6、iconfont.css 添加如下內容(圖標可以通過text view button等組件引用)。
text[class*="icon-"], view[class*="icon-"], button[class*="icon-"] { font-family: "iconfont"; font-size: inherit; font-style: normal; }
7、資源文件已經處理好了,開始引用,可以全局應用(在app.vue中style中添加引用),也可以局部引用(指定.vue中的style中添加引用)。
到此完成。
技術討論群: 792344396