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

1.进入iconfont官网

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

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

 

 

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

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

 

 

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

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

   将这两个文件放入项目

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

  将文件第一段改为下图

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

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

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

  4.在项目中使用

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

   查看效果

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

  添加新图标至项目

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

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

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

  引用新加入的图标

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

 

 

 

 最后查看效果

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

 

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

上一篇:Python项目模块找不到路径问题


下一篇:iOS音频流混音实践