小程序中如何引用阿里图标 | 您所在的位置:网站首页 › 阿里云图标有个图标显示有图标不显示 › 小程序中如何引用阿里图标 |
如何在小程序中引用阿里图标库的图标
前言选择图标,生成css代码在小程序中引用该图标
前言
前段时间有使用图标的需求,在阿里图标库找到不少小图标,可是总不能一个一个全下载下来放到项目文件里吧,这样就太麻烦了,还占项目空间(小程序要求整个项目大小不能超过2M),怎么办呢?第一种办法是把图标啥的都放在服务器上,这得把图标下载下来,然后上传到自己的服务器,略显麻烦。还有一种方法就是直接在阿里图标库中生成css字体文件,然后在项目中引用即可,这种不用一个一个下载,只需添加一个css文件,所占空间也比把小图标放在项目里要小很多,话不多说,一起来看看怎么做吧。 选择图标,生成css代码图标库地址 :阿里图标库; 登陆阿里图标库; 搜索你想要的图标; 点击添加入库; 点击右上角购物车按钮,就会看见你添加的图标了; 点击下方添加至项目,如果没有项目可以新建一个,新建完成后会自动跳转至你这个项目; 在这里直接点击查看在线链接,然后点击"暂无代码,点此生成",等待代码生成后,复制代码(访问链接复制网页上的代码)。 在小程序中引用该图标1.进入小程序开发者工具,在我们的项目文件夹中创建一个wxss文件,将你复制的代码粘贴进去并保存; 2.在你需要引入的页面wxss文件中导入图标样式,此处示例为index页面,即在index.wxss文件中写入@import ‘你当前图标样式文件的路径’,即可引入,如图: 3.要在页面中显示该图标,如图1,在代码中写一个icon标签(i标签也可以),在class属性中首先写入iconfont,声明你使用的字体样式 然后写入阿里图标库中该图标的名称(如图2),如果你嫌打开阿里图标库麻烦,可以直接打开icon.wxss,查看你的图标名称,不过这样不能直观的看到你的图标长什么样,如果图标很多的话,就比较麻烦,如图3 图1 图2 3.保存你的代码,你就可以看到你引入的图标显示出来啦,如果想要调整它的样式,可以直接按字体的样式来写,比如想改变它的颜色,直接就可以写color:‘你想要的颜色’,想改变大小,直接写font-size:'你想要的大小’即可。; 好了,今天的分享就到这了,觉得有用就点个赞哦! |
CopyRight 2018-2019 实验室设备网 版权所有 |