uni-app 使用 iconfont

 更新：

　　根據官網 小於 40kb 的字體文件能夠直接本地引用。

　　方法以下：

　　　　首先下載字體文件。

　　　　而後刪除多餘文件，只須要留下 iconfont.ttf 和 iconfont.css 文件便可使用。

　　　　放入到 static 下。

　　　　修改 iconfont.css 文件，以下

　　　　

　　　　左側紅框裏是留下的字體文件，右側是修改 iconfont.css 樣式。

　　　　而後，引入 樣式文件：

　　　

　　　　最後，就能夠在 項目中使用了。

　　　　

 　　　　下面是 實際效果：設置了大小和顏色。

　　　　　　

 

 

 

---

 

使用 uni-app 作項目時須要用到 iconfont。和 web 使用略有差異。謹以此記錄。

由於 uni-app 不能使用本地字體圖標庫，因此不能直接下載使用。

一、將iconfont中須要的圖標，加入購物車，而後放到項目。生成在線代碼，稍後用。

二、下載項目至本地。而後解壓取出 iconfont.css 文件。

三、將 1 中的在線代碼 copy 替換掉 iconfont.css 中的 @font-face。而且加上前綴 https: 。完成後以下：

這樣就是引用的 阿里巴巴的 在線圖標庫了。

四、在項目中須要的地方引入 這個改好的 iconfont.css 文件。

HTML 部分：

使用圖表有兩種 方法：如上所示。其中 selfStyle 是本身設置的 圖標樣式，就能夠像設置字體那樣設置了。

至此，完成。