uniapp 中使用 iconfont

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)

非彩色的

一、Unicode 引用（Unicode 是字体在网页端最原始的应用方式）

特点：

（1）支持按字体的方式去动态调整图标大小，颜色等等；

（2）默认情况下不支持多色，直接添加多色图标会自动去色。

使用步骤如下：

下载的源代码放到 static/icon目录下

二、APP.VUE 页面添加引用

三、修改为正确的引用文件夹

页面中就可以写iconfont icon-home来引用图标，style来更改大小。

<i class="iconfont icon-home" style="font-size: 100upx;"></i>