uni-app引入阿里iconfont

 

 

前言：

     目前正在經過 UNI-APP平臺開發移動應用，uni-app平臺是去年年出才建立的一個新品臺，所以資源相對比較匱乏，在此遇到一個問題，一直使用別人提供的iconfont，但老是不夠用，爲了解決這個問題，花了些時間給本身也搞了個字體庫，如何操做，請看下文。

準備：

　　阿里巴巴提供資源網址：https://www.iconfont.cn/

參考文檔：

　　http://www.javashuo.com/article/p-ssxvkuht-ck.html

 操做：

　　一、進入網站（長得就是下圖這個樣子）：

 

   2、搜索本身須要的資源，並添加到本身的項目當中。

    1. 項目在哪，看下圖，若是沒有項目本身能夠快速建立一個項目，項目個人理解就是一個分類的文件夾。

 　2. icon怎麼添加到項目中。

　　點擊圖標 -> 加入庫 -> 添加到項目。

 

 3、打開個人項目：

 

   一、點擊下方的 " 下方新icon....." 紅色字體，生成字體代碼。

   二、選擇Unicode。

  三、下載到本地。

四、下載的資源解壓打卡，拷貝 "iconfont.css"到大家項目中。

五、將iconfont.css中的  @font-face 替換成網絡資源，//at 前所有替換成 https: //at........，以下圖，保存。

 

  六、iconfont.css 添加以下內容（圖標能夠經過text view button等組件引用）。

text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {
	font-family: "iconfont";
	font-size: inherit;
	font-style: normal;
}

　七、資源文件已經處理好了，開始引用，能夠全局應用（在app.vue中style中添加引用），也能夠局部引用（指定.vue中的style中添加引用）。

 到此完成。   

技術討論羣：  792344396