uniapp引入彩色的字体图标的教程

一、效果图

二、步骤

1、阿里巴巴矢量图标官网，将自己喜欢的图标加入购物车，然后下载图标到本地

2、在uniapp下的static，新建一个iconfont文件夹，将下载的压缩包解压图标到static的iconfont下面。

3.进入文件夹下，按照以下步骤：

4.命令窗口输入如图内容

第一步：npm install -g iconfont-tools


第二步：iconfont-tools

5、之后会发现多了这个文件

6、然后就可以使用它了，一定要按照标横线这样的格式去使用：

注意：

1、一定要按照它的样式： t-icon t-icon-XXXXX

2、通过height 和 width 改变它的图标大小

3、需要加  background-repeat:no-repeat;否则会图标会平铺满整个屏幕