Icon

图标。Icon UI 提供与WeLink规范一致的视图。

        <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>
 详见：点击这里