uni-app项目引入图标

uni-app项目引入图标

普通图标引入

1、阿里巴巴矢量图官网创建图标项目


2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面


3、下载该文件到本地，将该文件的css文件复制到项目里面 （并设置大小）


4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾

5、项目页面使用icon

 <view class="icon iconfont 图库的图标名"></view>

彩色图标引入

1、同样创建彩色图标项目，在阿里巴巴矢量图库将彩色图标添加进所需的项目中，将该文件下载到本地

2、通过cmd【window+R，输入cmd】进入下载的iconfont文件内（注：我下载的文件已被我重命名为iconfont）
1）进入下载文件的位置（我的在d盘）d:
2）进入文件图标文件cd 文件地址

3、通过命令行下载iconfont-tools来生成彩色图标库小程序专用文件即可引入使用
1）全局安装：npm install -g iconfont-tools
2）文件生成tools：iconfont-tools
3）按着提示完成输入（每次输入直接回车）

4、完成后iconfont文件夹即生成的目标文件 iconfont-weapp ，将该文件的iconfont-weapp-icon.css 文件放入项目中

5、将iconfont-weapp-icon.css文件的大小重新设置

6、项目中引入该文件

7、项目使用

<view class="t-icon t-icon-图标名"></view>

<view class="weixinLogin">
			<view class="t-icon t-icon-weixin"></view>
			<view>微信登录</view>
</view>

提示：若有错的地方希望各位能够指出来，我及时更正。若有不明白的也可以与我沟通。谢谢支持。