步骤一:加入购物车
打开iconfont矢量图标库,找到自己喜欢的图标,添加到购物车。
步骤二:添加至项目
步骤三:下载到本地
步骤四:解压
步骤五:转换ttf文件
因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。
1、进入https://transfonter.org/平台;
2、点击Add fonts,添加iconfont.ttf
勾选上必要选项。
点击convert
下载
步骤六:准备图标
把刚刚Download的文件解压,打开,如下:
以文本的形式打开stylesheet.css样式文件。可以看到font-face的url已经转换为base64格式。
打开最早下载的那个解压文件,找到iconfont.css。
然后把iconfont.css里面圈红的部分(即fontface部分我们不需要啦)复制到stylesheet.css
步骤七:使用图标
修改stylesheet.css的名称和后缀,我修改为common_icon.wxss。
查看图标
引用样式表
页面调用
调试器展示
希望对大家有帮助。