28. 教你零基础搭建小程序：小程序的常见组件—icon图标
筒子们，又又又又来了。https://p3.pstatp.com/large/pgc-image/a027993496004233b9e0feb922837f1c
今天继续前缘，
讲解小程序的自定义组件（6）—— icon图标。
已经讲到6了，别着急，别放弃，
我们后面就还有3个自定义组件。
就快了，哈哈。
https://p3.pstatp.com/large/pgc-image/8d21a3f479574934902522c224ce9aa0
废话不多说，直接上干货。
关于icon 图标呢，
在小程序中，已存在一些比较简单的字体图标，可供我们使用。
https://p3.pstatp.com/large/pgc-image/e2adec1996ee472593839ad49bcc3584
如上图所示。它有三种属性：
第一行：改变的是图标的大小 size
第二行：改变的是 type 类型。
第三行：改变的是图标的各种颜色 color
列个表（重点！）
https://p3.pstatp.com/large/pgc-image/00da2dfcf531486b8f9719d368f8f59a
光说不练假把式，我们在开发者工具中带大家演示一下。
1、新增一个页面 demo14
2、打开de'mo14.wxml文件，删除原先的代码，加入如下代码：
3、保存，小程序页面出现绿色的"选中"图标
https://p3.pstatp.com/large/pgc-image/9d916ef60e584d00b4439a647e70fe1d
（一）icon 图标的大小 size
1、修改上面代码中的size，size=60，代码如下：
2、保存，小程序页面出现大一号的绿色"选中"图标
https://p3.pstatp.com/large/pgc-image/92b5434d8eba41d2a02974bba7428c15
（二）icon 图标的颜色 color
上面图标颜色为绿色，我们这里要改变颜色，怎么操作呢？
1、修改上述代码color，图标变成蓝色，换算成十六进制为"#0094ff",代码如下：
2、保存，小程序页面出现蓝色的"选中"图标
https://p3.pstatp.com/large/pgc-image/4885eaa0959a44be818b4191693f3315
这里要注意颜色的使用一定要是十六进制的，
而不是单纯的yellow、green
附上一个可以在线转换十六进制颜色的工具，
六六的使用起来
https://www.sioe.cn/yingyong/yanse-rgb-16/
（三）icon 图标的类型 type
icon的类型，有效值有以下：
success, success_no_circle,
info, warn, waiting, cancel,
download, search, clear
种类繁多，操作基本一致，但全部演示起来很累，哈哈。
https://p3.pstatp.com/large/pgc-image/a13ddff7a1c44c3caedf48e75051dfde
接下来就演示一个有效值—— cancel
还是demo14.wxml文件中，将如下代码：
修改type="cancel"，其他不变，保存代码，看效果：
https://p3.pstatp.com/large/pgc-image/859e1744d97d4897a404ddd778b696c6
其他type属性的有效值，写法是一样的，大家课下可以一一尝试，并熟练记住，很重要滴~~~
https://p3.pstatp.com/large/pgc-image/c286dbef71874fd79fa79b2794a400f1
搜索并关注微信公众号：飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等！
做小程序我们是认真的！
页:
[1]