微信小程序icon图标使用详解

野性酷女 2023-10-07 17:29 3阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

icon 在微信小程序中用来显示图标。

--------------------

##### 1 icon 图标的基本使用 #####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_14_color_FFFFFF_t_70_g_se_x_16]

<view class="container">
      <view class="icon-box">
        <icon class="icon-box-img" type="success" size="44"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">成功</view>
          <view class="icon-box-desc">用于表示操作顺利完成</view>
        </view>
      </view>

其实核心代码就是

*  type 是图标显示的类型 可取值 success, success\_no\_circle, info, warn, waiting, cancel, download, search, clear
 *  size 是图标显示的大小 默认单位是 px
 *  color 是图标的颜色

##### 2 type 取值概述 #####

###### 2.1 info ######

info 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息

![在这里插入图片描述][871c5845a98a4827a44edf018eeec918.png]

###### 2.2 warn ######

默认，强烈警告，用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况

![在这里插入图片描述][8d2965305c84442497d84d75ae0e8bbf.png]  
我们也可以设置一个颜色，普通警告，用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果

![在这里插入图片描述][33c783170dd24ddea12c6c68de2ab3f5.png]

###### 2.3 info\_circle ######

用于在表单中表示有信息提示

![在这里插入图片描述][4b02773eb8cd4ebda623d381792bdddc.png]

###### 2.4 waiting ######

用于表示等待，告知用户结果需等待

![在这里插入图片描述][b77b9fe0ec6048db8e4848779fc81b07.png]

###### 2.5 success\_no\_circle ######

用于多选控件中，表示已选择该项目

![在这里插入图片描述][72ecf088169d450ab147b59419ee62d0.png]

###### 2.6 circle ######

用于多选控件中，表示该项目可被选择，但还未选择

![在这里插入图片描述][96c9d282a5e34dafae221372e07aeac6.png]

###### 2.7 circle ######

用于单选控件中，表示已选择该项目

![在这里插入图片描述][76155ab5c33d40d6aaf70382e727a396.png]

###### 2.8 download ######

用于表示可下载

![在这里插入图片描述][0e67f123add04a2abb52dc4b9c11424d.png]

###### 2.9 cancel ######

停止或关闭

<icontype="cancel" size="44"></icon>

![在这里插入图片描述][97a62a6151ab40cea83ebcc1d4e26b76.png]

###### 2.10 search ######

用于搜索

![在这里插入图片描述][cd92756243dd4f969e556f9fc86600f2.png]

--------------------

完毕

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2bce9c63717e459bbfe88bde1f62b0ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_14,color_FFFFFF,t_70,g_se,x_16
[871c5845a98a4827a44edf018eeec918.png]: https://img-blog.csdnimg.cn/871c5845a98a4827a44edf018eeec918.png
[8d2965305c84442497d84d75ae0e8bbf.png]: https://img-blog.csdnimg.cn/8d2965305c84442497d84d75ae0e8bbf.png
[33c783170dd24ddea12c6c68de2ab3f5.png]: https://img-blog.csdnimg.cn/33c783170dd24ddea12c6c68de2ab3f5.png
[4b02773eb8cd4ebda623d381792bdddc.png]: https://img-blog.csdnimg.cn/4b02773eb8cd4ebda623d381792bdddc.png
[b77b9fe0ec6048db8e4848779fc81b07.png]: https://img-blog.csdnimg.cn/b77b9fe0ec6048db8e4848779fc81b07.png
[72ecf088169d450ab147b59419ee62d0.png]: https://img-blog.csdnimg.cn/72ecf088169d450ab147b59419ee62d0.png
[96c9d282a5e34dafae221372e07aeac6.png]: https://img-blog.csdnimg.cn/96c9d282a5e34dafae221372e07aeac6.png
[76155ab5c33d40d6aaf70382e727a396.png]: https://img-blog.csdnimg.cn/76155ab5c33d40d6aaf70382e727a396.png
[0e67f123add04a2abb52dc4b9c11424d.png]: https://img-blog.csdnimg.cn/0e67f123add04a2abb52dc4b9c11424d.png
[97a62a6151ab40cea83ebcc1d4e26b76.png]: https://img-blog.csdnimg.cn/97a62a6151ab40cea83ebcc1d4e26b76.png
[cd92756243dd4f969e556f9fc86600f2.png]: https://img-blog.csdnimg.cn/cd92756243dd4f969e556f9fc86600f2.png