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 是本身设置的 图标样式，就能够像设置字体那样设置了。

至此，完成。