uniapp 开发小程序使用iconfont图标方法

1、进入阿里巴巴矢量图标库 https://www.iconfont.cn/ 添加图标到项目,然后下载至本地

uniapp 开发小程序使用iconfont图标方法_第1张图片

解压后的本地文件如下

uniapp 开发小程序使用iconfont图标方法_第2张图片

2、下载iconfont-tools

  1. npm install -g iconfont-tools  全局安装

  2. 打开下载好的图标文件夹,如上图所示目录,在下载好的文件夹下通过cmd命令打开

  3. 然后在cmd窗口执行 iconfont-tools 命令

  4. 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹

uniapp 开发小程序使用iconfont图标方法_第3张图片

uniapp 开发小程序使用iconfont图标方法_第4张图片

进入iconfont-weapp文件夹,将其中的iconfont-weapp-icon.css复制出来放入项目中的static目录下,然后在App.vue引入该文件就可以了

@import './static/iconfont-weapp-icon.css';

 

3、页面中的使用方法

其中t-icon是必须添加的






你可能感兴趣的:(前端,vue)