uniapp引入iconfont圖示及解決真機中iconfont不顯示的問題

一、uniapp中如何引入iconfont圖示

1、先從iconfont網站下載下傳項目檔案。如圖：

2、下載下傳好的iconfont檔案解壓，取iconfont.css放入自己工程目錄

3、回到iconfont網站，點選複制代碼，隻需要ttf格式的位址就行

4、打開項目中的iconfont.css檔案，用複制的ttf格式的代碼寫進@font-face中，如下：

@font-face {
　　font-family: "iconfont";
　　src: url(\'https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf\') format(\'truetype\');
}      

5、最後在App.vue 的 style标簽中引入iconfont.css

6、重新編譯，可以看到應的圖示。

二、解決真機中iconfont不顯示的問題

　　問題：經過如上操作，iconfont圖示在H5裡是正常顯示了，但是當在真機app上調試時卻發現icon顯示不成功。

　　解決方案：官方連結：https://uniapp.dcloud.io/matter

@font-face {
　　font-family: "iconfont";
　　src: url(\'//at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf\') format(\'truetype\');
}

// 改為這樣即可：
@font-face {
　　font-family: "iconfont";
　　src: url(\'https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf\') format(\'truetype\');
}