Icon
图标。Icon UI 提供与WeLink规范一致的视图。
效果示例
HTML
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-headPortrait"></i>
</div>
<p class="weui-grid__label">默认头像</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-arrowLeft"></i>
</div>
<p class="weui-grid__label">返回箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-arrowLeftPress"></i>
</div>
<p class="weui-grid__label">返回箭头按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-tel"></i>
</div>
<p class="weui-grid__label">消息通话</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-telPress"></i>
</div>
<p class="weui-grid__label">消息通话按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-add"></i>
</div>
<p class="weui-grid__label">更多</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-addPress"></i>
</div>
<p class="weui-grid__label">更多按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-telPhoto"></i>
</div>
<p class="weui-grid__label">拨打电话</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-telPhotoPress"></i>
</div>
<p class="weui-grid__label">拨打电话按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-personalChatSettings"></i>
</div>
<p class="weui-grid__label">个人设置</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-personalChatSettingsPress"></i>
</div>
<p class="weui-grid__label">个人设置按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-groupChatSetting"></i>
</div>
<p class="weui-grid__label">群聊信息</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-groupChatSettingPress"></i>
</div>
<p class="weui-grid__label">群聊信息按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-arrowBottomRed"></i>
</div>
<p class="weui-grid__label">下拉箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-editEmail"></i>
</div>
<p class="weui-grid__label">邮件新建</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-editEmailPress"></i>
</div>
<p class="weui-grid__label">邮件新建按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-arrowBottom"></i>
</div>
<p class="weui-grid__label">邮件上一页</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-arrowBottomPress"></i>
</div>
<p class="weui-grid__label">邮件上一页按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-organization"></i>
</div>
<p class="weui-grid__label">我的组织</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-organizationPress"></i>
</div>
<p class="weui-grid__label">我的组织按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-readingHistory"></i>
</div>
<p class="weui-grid__label">阅读历史</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-readingHistoryPress"></i>
</div>
<p class="weui-grid__label">阅读历史按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-cardManage"></i>
</div>
<p class="weui-grid__label">卡片管理</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-cardManagePress"></i>
</div>
<p class="weui-grid__label">卡片管理按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-uploadFile"></i>
</div>
<p class="weui-grid__label">云空间上传</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-uploadFilePress"></i>
</div>
<p class="weui-grid__label">云空间上传按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-more"></i>
</div>
<p class="weui-grid__label">更多</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-morePress"></i>
</div>
<p class="weui-grid__label">更多按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-share"></i>
</div>
<p class="weui-grid__label">分享</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-sharePress"></i>
</div>
<p class="weui-grid__label">分享按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-scan"></i>
</div>
<p class="weui-grid__label">扫一扫</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-scanPress"></i>
</div>
<p class="weui-grid__label">扫一扫按压</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-search"></i>
</div>
<p class="weui-grid__label">搜索</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-nav icon-nav-searchPress"></i>
</div>
<p class="weui-grid__label">搜索按压</p>
</a>
</div>
</section>
<h1>12 * 12</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-12 icon-12-redFlag"></i>
</div>
<p class="weui-grid__label">旗标</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-12 icon-12-warn"></i>
</div>
<p class="weui-grid__label">异常、警示</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-12 icon-12-share"></i>
</div>
<p class="weui-grid__label">转发</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-12 icon-12-attach"></i>
</div>
<p class="weui-grid__label">附件</p>
</a>
</div>
</section>
<h1>16 * 16</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-magnifier"></i>
</div>
<p class="weui-grid__label">放大镜</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-clear"></i>
</div>
<p class="weui-grid__label">清除文字</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-arrowRight"></i>
</div>
<p class="weui-grid__label">右箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-arrowBottom"></i>
</div>
<p class="weui-grid__label">下拉箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-arrowRightRed"></i>
</div>
<p class="weui-grid__label">向右箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-arrowBottomRed"></i>
</div>
<p class="weui-grid__label">下拉箭头</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-16 icon-16-radio"></i>
</div>
<p class="weui-grid__label">勾选</p>
</a>
</div>
</section>
<h1>24 * 24</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-comment"></i>
</div>
<p class="weui-grid__label">评论</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-checkbox"></i>
</div>
<p class="weui-grid__label">勾选框</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-checkboxChecked"></i>
</div>
<p class="weui-grid__label">勾选框</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-checkboxGray"></i>
</div>
<p class="weui-grid__label">勾选框</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-addControl"></i>
</div>
<p class="weui-grid__label">添加卡片</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-deleteControl"></i>
</div>
<p class="weui-grid__label">删减卡片</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-deleteControlGray"></i>
</div>
<p class="weui-grid__label">不可删减卡片</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-exception"></i>
</div>
<p class="weui-grid__label">toast异常状态</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-delete"></i>
</div>
<p class="weui-grid__label">删除</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-sort"></i>
</div>
<p class="weui-grid__label">排序</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-message"></i>
</div>
<p class="weui-grid__label">创建群聊</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-collect"></i>
</div>
<p class="weui-grid__label">收藏未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-collected"></i>
</div>
<p class="weui-grid__label">收藏选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-dig"></i>
</div>
<p class="weui-grid__label">点赞未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-digged"></i>
</div>
<p class="weui-grid__label">点赞选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-follow"></i>
</div>
<p class="weui-grid__label">添加关注</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-addExternalContact"></i>
</div>
<p class="weui-grid__label">添加外部联系人</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-24 icon-24-scan"></i>
</div>
<p class="weui-grid__label">扫一扫</p>
</a>
</div>
</section>
<h1>文本输入框</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-input icon-input-emoji"></i>
</div>
<p class="weui-grid__label">表情</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-input icon-input-keyboard"></i>
</div>
<p class="weui-grid__label">键盘输入</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-input icon-input-add"></i>
</div>
<p class="weui-grid__label">副媒体入口</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-input icon-input-voice"></i>
</div>
<p class="weui-grid__label">语音输入</p>
</a>
</div>
</section>
<h1>标签栏</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-message"></i>
</div>
<p class="weui-grid__label">消息未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-messageCurrent"></i>
</div>
<p class="weui-grid__label">消息选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-email"></i>
</div>
<p class="weui-grid__label">邮件未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-emailCurrent"></i>
</div>
<p class="weui-grid__label">邮件选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-contact"></i>
</div>
<p class="weui-grid__label">通讯录未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-contactCurrent"></i>
</div>
<p class="weui-grid__label">通讯录选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-business"></i>
</div>
<p class="weui-grid__label">业务未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-businessCurrent"></i>
</div>
<p class="weui-grid__label">业务选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-knowleage"></i>
</div>
<p class="weui-grid__label">知识未选</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-knowleageCurrent"></i>
</div>
<p class="weui-grid__label">知识选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-cloudDisk"></i>
</div>
<p class="weui-grid__label">云空间</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-cloudDiskCurrent"></i>
</div>
<p class="weui-grid__label">云空间选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-group"></i>
</div>
<p class="weui-grid__label">团队</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-groupCurrent"></i>
</div>
<p class="weui-grid__label">团队选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-share"></i>
</div>
<p class="weui-grid__label">共享给我的</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-shareCurrent"></i>
</div>
<p class="weui-grid__label">共享给我的选中</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-transportList"></i>
</div>
<p class="weui-grid__label">传输列表</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-tab icon-tab-transportListCurrent"></i>
</div>
<p class="weui-grid__label">传输列表选中</p>
</a>
</div>
</section>
<h1>文档类</h1>
<section>
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Word"></i>
</div>
<p class="weui-grid__label">Word</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-TXT"></i>
</div>
<p class="weui-grid__label">TXT</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-PPT"></i>
</div>
<p class="weui-grid__label">PPT</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-PDF"></i>
</div>
<p class="weui-grid__label">PDF</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-LOG"></i>
</div>
<p class="weui-grid__label">LOG</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-IPA"></i>
</div>
<p class="weui-grid__label">IPA</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Excel"></i>
</div>
<p class="weui-grid__label">Excel</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-DMG"></i>
</div>
<p class="weui-grid__label">DMG</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-ZIP"></i>
</div>
<p class="weui-grid__label">ZIP</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Photo"></i>
</div>
<p class="weui-grid__label">Photo</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Video"></i>
</div>
<p class="weui-grid__label">Video</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Code"></i>
</div>
<p class="weui-grid__label">Code</p>
</a>
<a href="javascript:;" class="weui-grid">
<div style="margin:auto; text-align: center;">
<i class="icon-40-folder icon-40-folder-Music"></i>
</div>
<p class="weui-grid__label">Music</p>
</a>
</div>
</section>