微信小程序里使用iconfont

一、单纯使用icon字体，不带原始样式

1、下载fontClass版图标

2、解压缩，将其中的.ttf字体格式文件进行转化

注：微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用Base64码

转化后：

然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face

转化方法：

推荐转化网站：https://transfonter.org/

将iconfont.ttf字体文件上传，

上传成功后，将相应的配置打开：

然后转化下载Convert：

3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，

4、在app.wxss中引用iconfont

5、使用

二、使用原始样式，就是在iconfont上设置好的样式，比如彩色样式

这种情况不能简单的使用iconfont字体了，因为字体本身没有样式，这个时候需要使用svg，但微信小程序不支持像web那样直接使用svg，微信小程序需要一个容器，比如<text>，然后使用svg作为它的背景就能达到效果了

1、打开你要使用的icon，复制svg代码

 

2、但这个时候的svg代码不能直接在小程序里用，还要再转化一步

转化地址：https://codepen.io/jakob-e/pen/doMoML

或者 https://boheyezi.com/web/svgtocss/

复制完后它会自动转化：

将转化完的复制到wxss代码里就可以直接用：

3、使用

4、svg初始的高宽为200，可以根据需要修改