iconfont图标_小程序引用Iconfont 图标

选择图标

下载代码

1.添加项目

2.选择 Unicode

3.下载代码

4.解压文件

5.拷贝iconfont.css到小程序目录

注意:我这里用的是支付宝小程序做演示 所有吧css后缀改成了 acss 如果是微信小程序的话 改成对应的.wxss 就好了

引用图标

可以单页面引用 也可以全局引用 如果是全局引用的话 则在app.acss/app.wxss中 引用即可 下面演示单页面引用方法

1.修改iconfont.css文件

打开刚才复制过来的css文件可以看到如下图所示 除了红框标识出来的base64 路径外 其他全部删掉

2.导入css

在页面对应的css 文件中 用 @import $PATH 引用图标

3.使用图标

4.效果展示

大功告成

5. 注意

引用彩色图标的话 图标本身颜色会丢失 默认变成字体颜色

如下 我的彩色巧克力变成了灰色狗粑粑

iconfont图标好像只支持单色(此点有待研究 有其他发现或异议的 请于下方评论)