小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)

上篇我们已经成功填加tabBar,那么我们这篇就讲解一下 引用图标icon,小程序里有自己的图标供大家使用,但是图标有限,有很多都满足不了我们的需求。这次呢 给大家介绍一下阿里图标,里面有大量的图标供你选择,

点击http://www.iconfont.cn/进入阿里图标库

下面我就给大家介绍两种引用icon的方法 , 引用小程序自带icon 和 引用阿里图标

一、引用小程序自带icon

1.打开 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html 可了解小程序icon;

下面我给大家写一个最简单的icon引用列子:代码如下:


    

结果如下:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第1张图片

所有实现如下:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第2张图片

小程序icon属性 如下图:小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第3张图片

上面就简单的实现了引用小程序自带 icon

二、引用阿里图标

① 首先 先新建一个空目录 ,名字随意,看懂就行,主要用来放iconfont.wxss,如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第4张图片   小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第5张图片

 

②打开 http://www.iconfont.cn/

没有登录的同学登录一下阿里图标

第一步:选择自己需要的icon如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第6张图片

第二步:加入购物车

想要选择哪个图标 就如下图加入购物车

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第7张图片

选多少都可以,选完以后,点击如下图的购物车

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第8张图片

第三步:添加至项目

点击后接着 如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第9张图片

添加项目 如果没有项目就新建一个,添加完如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第10张图片

第四步:下载 

接下来点击  按钮,下载完打开 如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第11张图片

第五步:下载上图 iconfont.css 放在刚开始新建的空目录中,如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第12张图片

第六步:给 iconfont.css 改名为  iconfont.wxss  如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第13张图片   小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第14张图片

并在app.wxss中引入iconfont.wxss 如下图:

注:如果不引用,最后阿里图标将不显示

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第15张图片

第七步:打开阿里图标 点击后如下图:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第16张图片

复制内容后

第八步:打开iconfont.wxss 修改 @font-face 里的内容

把你在上图复制的内容,复制完 把 iconfont.wxss 里@font-face 里的内容 替换后 代码如下:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第17张图片

第九步:页面简单引用,代码如下;




    




   
   
   
   

代码解释如下:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第18张图片第十步:效果如下:

小程序成長之路_引入小程序自带icon 和 引用阿里图标(四)_第19张图片

写到这就结束了,希望大家可以灵活应用在项目里呦~~ ,也希望大家多多反馈,我写的比较详细,希望大家不要嫌太啰嗦 呼呼~

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