1.进入iconfont官网

把自己需要的图标加入购物车,然后选择添加至项目。

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_加入项目

 

 

 2.然后选择下载到本地。

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_解压文件_02

 

 

 解压文件,只需要保留iconfont.css、confont.ttf

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_官网_03

   将这两个文件放入项目

   iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_加入项目_04

  将文件第一段改为下图

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_官网_05

 3.在APP.vue的style里面引用

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_css_06

  4.在项目中使用

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_解压文件_07

   查看效果

 iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_加入项目_08

  添加新图标至项目

把需要添加的新图标加入项目,然后下载

打开新下载的iconfont.css文件,找到新加的图标名称,复制到项目里的iconfont.css文件里

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_官网_09

  引用新加入的图标

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_加入项目_10

 

 

 

 最后查看效果

iconfont使用教程,在uniapp中使用iconfont,及新增图标的方法_css_11