怎么在小程序中引入其他小图标icon

本来说要一个星期至少写两篇文章的,结果懒癌发作。这个问题也折腾了我一个多小时,查了几篇文章,算是一个总结吧,在加上自己的一点小心得。

1、先是找你要引入的icon小图标,我一般是在阿里图库找的,网址:http://www.iconfont.cn/collections/index
2、把选好的图标用这样的方式下载下来

image.png

3、解压后,找到后缀为ttf的文件
image.png

4、因为小程序的限制,我们现在需要把字体文件转化成base64格式,需要用到如下网站:https://transfonter.org/
5、点击“Add fonts”上传之前的ttf文件,打开“Base64 encode”按钮,并只选择“TTF”,最后点击“Convert”转换
image.png

6、转换好之后,点击“Download”下载
image.png

7、解压后,我们会看到这个文件,用写代码的工具打开
image.png

8、还记得之前第2部下载的文件包吗? 找到里面的这个文件,并打开
image.png

9、把红框里面的代码替换成第七步文件里面的所有代码,然后放到小程序的css样式里面
image.png

10、在wxml中的使用方法这样的

<text class='iconfont icon-cuowu'></text>

最后啰嗦一句,建议大家把这段代码封装到一个独立的样式文件里面,再@import 引入到app.wxss里面作为全局,当然也可以引入到局部。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容