微信小程序引入iconfont.ttf

微信小程序引入iconfont.ttf

步骤

打开 www.iconfont.cn
把需要的用到的icon添加到库
微信小程序引入iconfont.ttf_第1张图片
添加完后,点击添加至项目
微信小程序引入iconfont.ttf_第2张图片微信小程序引入iconfont.ttf_第3张图片
点击下载到本地,把整个icon的项目下载下来。
微信小程序引入iconfont.ttf_第4张图片
把项目下载下来压缩后,得到一个文件夹
微信小程序引入iconfont.ttf_第5张图片
在项目中创建一个新的目录iconfont ,把压缩文件里的iconfont.ttf和iconfont.css复制到新目录下,把iconfont.css文件的后缀改为wxss
微信小程序引入iconfont.ttf_第6张图片
在app.wxss里引入iconfont.wxss

@import 'iconfont/iconfont.wxss';

微信小程序引入iconfont.ttf_第7张图片
完成以上步骤,即把iconfont引入

用法

打开iconfont.wxss文件,查看iconfont名称,将iconfont 和 图标的类放在同一个元素,即可实现。

微信小程序引入iconfont.ttf_第8张图片


在这里插入图片描述
新人记录自己的经历,如有错误,请大佬们多多指点!

你可能感兴趣的:(学习笔记)