Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源)

一、引入iconfont

首先在iconfont.com中注册登陆:

点击上方【图标管理】并进入我的项目

注意:如果没有项目的话,就点击右边的来创建项目

在官网中找到想要的图标之后,以SVG的形式下载下来,然后在iconfont【我的项目】中上传刚下载下来的图标

 上传的时候记得对图标命名为【英文的】

这样就创立了自己项目要用到的图标了

那如何在微信开发者工具中使用呢?

新创一个iconfont文件

再回到iconfont中【我的项目】

可以直接复制这个链接,在网页中打开这个链接会发现,是一个在线的css样式:

复制这个页面的全部代码,到iconfont.wxss中即可

然后在app.wxss文件中引入这个iconfont.wxss文件

@import "style/iconfont/iconfont.wxss"

即可在主页中使用这些图标了

比如:

我想要使用右箭头:【在iconfont我的项目中复制这个图标的代码】

 在index.wxml中使用(class中要包含引入的iconfont.wxss的名字,还有要使用的图标的代码---iconyoujiantou)

<text class="iconfont iconyoujiantou"></text>

效果图:

原文地址:https://www.cnblogs.com/SCAU-gogocj/p/13158018.html