微信小程序使用字体图标库

在微信小程序项目中需要用到字体图标,所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库,就以此为例来说。

一、去阿里巴巴矢量图标库下载需要的图标

进入https://www.iconfont.cn/,在我的项目中添加自己需要的图标,具体如下

微信小程序使用字体图标库_第1张图片

搜索图标后,添加至项目

微信小程序使用字体图标库_第2张图片   微信小程序使用字体图标库_第3张图片

将项目下载至本地并解压

微信小程序使用字体图标库_第4张图片

二、转换ttf文件

将解压后得到的ttf文件拿到https://transfonter.org/进行转换,转换步骤如下图片所示

微信小程序使用字体图标库_第5张图片

微信小程序使用字体图标库_第6张图片

下载转换后的文件

微信小程序使用字体图标库_第7张图片

三、在微信小程序中使用

解压下载后的文件,在编辑器中打开

微信小程序使用字体图标库_第8张图片

微信小程序使用字体图标库_第9张图片

将其中的内容复制到微信小程序的wxss文件中

再打开之前在阿里巴巴矢量图标库中下载的文件

微信小程序使用字体图标库_第10张图片

打开上图css文件,将下图框中的代码复制到微信小程序wxss文件中

微信小程序使用字体图标库_第11张图片

最后在微信小程序wxml中的class中引用即可,如图,代码如下


     
     

微信小程序使用字体图标库_第12张图片

微信小程序使用字体图标库_第13张图片

你可能感兴趣的:(微信小程序)