浅谈微信小程序中引入并使用自带和外部图标的方法

本篇文章给大家介绍一下微信小程序中自带图标和外部图标的使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

相关学习推荐：小程序开发教程

自带图标

<view class="container">
  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="info" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">普通警告</view>
      <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">强烈警告</view>
      <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="waiting" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">等待</view>
      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success_no_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_已选择</view>
      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_未选择</view>
      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="warn" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">错误提示</view>
      <view class="icon-box-desc">用于在表单中表示出现错误</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">单选控件图标_已选择</view>
      <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="download" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">下载</view>
      <view class="icon-box-desc">用于表示可下载</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="info_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于在表单中表示有信息提示</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="cancel" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">停止或关闭</view>
      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="search" size="14"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">搜索</view>
      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
    </view>
  </view>

</view>

# 自带  # 多选  # 表单  # 浅谈  # 该项目  # 后将  # 程序开发  # 单选  # 有一个  # 有一定  # 所需  # 这是一个  # 相关文章  # 中文网  # 给大家  # 还未  # 解决问题  # 介绍一下  # 相关知识  # 浏览过 

相关栏目： 【 网站优化84359 】 【 站长学院75356 】 【 运营推广7218 】 【 小程序18188 】 【 运维技术36808 】 【 营销推广32536 】 【 SEO优化41416 】 【 百度推广27695 】 【 AI推广83940 】

相关推荐： PHP 函数按是否可以被重载如何分类？  C++ 函数调用约定与栈帧管理：不同编译器的实现差异  C++ 函数参数传递中虚函数的调用是如何实现的？  怎么从微信卡包跳转到小程序？实现方法浅析  如何实现在小程序中进行微信支付  浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）  C++ lambda 表达式和匿名函数有什么区别？  PHP 中函数分类有哪些？  PHP 函数返回值类型有哪些分类？  streamlit框架介绍  PHP 函数的分类标准是什么？  PHP 函数如何获取 XML 数据？  探讨Golang框架的安全设计原则  微信小程序开发之图片上传+服务端接收教程  小程序转发功能的实现  PHP 函数如何跨平台扩展？  总结几点小程序开发技巧  C++ 函数指针与函数对象在多线程中的应用？  malloc动态分配数组且添加内容  C++ 函数的Boost库扩展  printf格式控制包括两部分  golang框架性能优化：理论与实践  微信小程序 教程之注册页面  C++ 自身函数的性能优化技巧有哪些？  浅析小程序中reLaunch跳转报错怎么解决  golang框架在高并发场景中的性能测试与分析  golang框架在高并发场景中的goroutine管理  PHP 函数如何获取 GET 变量？  微信小程序首页数据初始化失败的解决方法  C++ 函数的const与volatile关键字的用法  golang框架在高并发场景中的负载均衡策略  微信小程序 欢迎界面开发的实例详解  PHP 函数按是否可以被传递如何分类？  Golang 框架中的数据加密与保护指南  浅析小程序中怎么实现Icon图标？  微信小程序实例介绍之列表渲染  C++ 函数中默认参数与可变参数的使用  C++ 函数的内存管理与优化  PHP 函数如何用于模块化代码？  微信小程序 wx:key详细介绍  微信公众平台开发--公交换乘  小程序开发步骤_小程序自己制作基础教程  微信小程序 WXML、WXSS 和JS介绍及详解  【分享阅读】学习Python基础书籍——快速易懂  微信小程序 支付简单实例及注意事项  C++ 自身函数中参数的意义是什么？  golang框架在高并发场景中的读写分离策略  memset函数用法详解 memset函数详细说明  微信小程序 （三）tabBar底部导航详细介绍  PHP 函数如何与 CSS 交互