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

一、引入iconfont

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

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

注意:如果没有项目的话,就点击右边的Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源)_第1张图片来创建项目

 

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

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

 

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

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

 

 

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

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

新创一个iconfont文件

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

 

 

再回到iconfont中【我的项目】

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

 

 

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

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

 

 

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

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

@import "style/iconfont/iconfont.wxss"

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

比如:

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

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

 

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

<text class="iconfont iconyoujiantou">text>

效果图:Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源)_第8张图片

 

你可能感兴趣的:(Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源))