uni-app项目引入图标-蒲公英云

uni-app项目引入图标

小鱼儿 2022-10-24 13:22 264阅读 0赞

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>