uniapp 中使用彩色的 iconfont
1、在自己图标库项目中下载到本地:
2、解压
3、shift+右键 打开powershell 窗口 执行一下代码
npm install -g iconfont-tools
4、在步骤2解压的文件中 执行命令行 (shift+右键 打开powershell 窗口 也行)
iconfont-tools
按一下操作
5、目录会多了个iconfont-weapp文件
进入文件把 iconfont-weapp-icon.css复制到 static 文件中
6、在app.vue中导入
@import './static/css/iconfont-weapp-icon.css';
7、使用格式
<view class="t-icon t-icon-shijian"></view>
t-icon开头 接图标的类名
iconfont-weapp-icon.css中查看类
上半部分引用于 uniapp 中使用彩色的 iconfont - 京鸿一瞥 - 博客园 (cnblogs.com)
非彩色的
特点:
(1)支持按字体的方式去动态调整图标大小,颜色等等;
(2)默认情况下不支持多色,直接添加多色图标会自动去色。
使用步骤如下:
下载的源代码放到 static/icon目录下
二、APP.VUE 页面添加引用
三、修改为正确的引用文件夹
页面中就可以写iconfont icon-home来引用图标,style来更改大小。
<i class="iconfont icon-home" style="font-size: 100upx;"></i>