<#def title = "图片图标"/> <#def keyword = "ZhiqimUI"/> <#def desc = "“图片图标”是把一组小图标图片拼成一张大图，通过CSS的background-position特性指定小图标在大图中的位置和宽高显示图标，"/> <#def prevUrl = "font.htm"/> <#def nextUrl = "text.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}
${zhiqim_com_ui("tutorial", "ui", "css", "ico")}
${zhiqim_com_breadcrumb("文库", "教程", "图片图标")}
<#-- 标题 -->

什么是“图片图标”？

“图片图标”是把一组小图标图片拼成一张大图，通过CSS的background-position特性指定小图标在大图中的位置和宽高显示图标， 知启蒙图片图标放在/service/res/image目录下，根据大小和类型分为12px、16px、22px、36px以及文件图标、树图标等，在这里还利用三角型和圆型生成箭头和圆圈等样式。

<#-- 操作类 -->
一、文件类型图标，共九个
样式 编码 举例 说明
.z-ico.z-file.z-word 
    <i class="z-ico z-file z-word"></i>
word图标
.z-ico.z-file.z-image 
    <i class="z-ico z-file z-image"></i>
图片图标
.z-ico.z-file.z-pdf 
    <i class="z-ico z-file z-pdf"></i>
pdf图标
.z-ico.z-file.z-video 
    <i class="z-ico z-file z-video"></i>
影像图标
.z-ico.z-file.z-music 
    <i class="z-ico z-file z-music"></i>
音乐图标
.z-ico.z-file.z-text 
    <i class="z-ico z-file z-text"></i>
文本图标
.z-ico.z-file.z-list 
    <i class="z-ico z-file z-list"></i>
列表图标
.z-ico.z-file.z-android 
    <i class="z-ico z-file z-android"></i>
安卓图标
.z-ico.z-file.z-png 
    <i class="z-ico z-file z-png"></i>
图像文件图标
<#-- 对话框图标 -->
二、对话框图标，共六个
样式 编码 举例 说明
.z-ico.z-confirm 
    <i class="z-ico z-confirm"></i>
确认图标
.z-ico.z-loading 
    <i class="z-ico z-alert"></i>
警告图标
.z-ico.z-loading 
    <i class="z-ico z-loading"></i>
加载图标
.z-ico.z-loading.z-small 
    <i class="z-ico z-loading z-small"></i>
加载小图标
.z-ico.z-pen 
    <i class="z-ico z-pen"></i>
修改图标
.z-ico.z-close.z-small 
    <i class="z-ico z-close z-small"></i>
关闭图标
<#-- 树形图标16px*22px -->
三、树型图标(16px * 22px)，一组反白，一组正常，默认反白，正常加z-normal样式
名称 代码 举例 说明
.z-ico.z-tree 
    <i class="z-ico z-tree"></i>
树形目录图标
.z-ico.z-tree.z-root 
    <i class="z-ico z-tree z-root"></i>
树形根节点图标
.z-ico.z-tree.z-lastnode 
    <i class="z-ico z-tree z-lastnode"></i>
指向下一个节点
.z-ico.z-tree.z-mlastnode 
    <i class="z-ico z-tree z-mlastnode"></i>
点击后收起菜单
.z-ico.z-tree.z-mnode 
    <i class="z-ico z-tree z-mnode"></i>
中间节点，点击后收起菜单
.z-ico.z-tree.z-node 
    <i class="z-ico z-tree z-node"></i>
指向节点
.z-ico.z-tree.z-plastnode 
    <i class="z-ico z-tree z-plastnode"></i>
点击后展开菜单
.z-ico.z-tree.z-pnode 
    <i class="z-ico z-tree z-pnode"></i>
中间节点，点击后展开菜单
.z-ico.z-tree.z-vertline 
    <i class="z-ico z-tree z-vertline"></i>
树形垂直线
.z-ico.z-tree.z-blank 
    <i class="z-ico z-tree z-blank"></i>
树形空白符
标准树形图标
.z-ico.z-tree.z-root.z-normal 
    <i class="z-ico z-tree z-root z-normal"></i>
树形根节点
.z-ico.z-tree.z-lastnode.z-normal 
    <i class="z-ico z-tree z-lastnode z-normal"></i>
指向下一节点
.z-ico.z-tree.z-mlastnode.z-normal 
    <i class="z-ico z-tree z-mlastnode z-normal"></i>
点击后展开菜单
.z-ico.z-tree.z-mnode.z-normal 
    <i class="z-ico z-tree z-mnode z-normal"></i>
中间节点，点击后展开菜单
.z-ico.z-tree.z-node.z-normal 
    <i class="z-ico z-tree z-node z-normal"></i>
指向节点
.z-ico.z-tree.z-plastnode.z-normal 
    <i class="z-ico z-tree z-plastnode z-normal"></i>
点击后收起菜单
.z-ico.z-tree.z-pnode.z-normal 
    <i class="z-ico z-tree z-pnode z-normal"></i>
中间节点，点击后收起菜单
.z-ico.z-tree.z-vertline.z-normal 
    <i class="z-ico z-tree z-vertline z-normal"></i>
树形垂直线
名称
.z-ico.z-tree.z-30.z-root 
    <i class="z-ico z-tree z-30 z-root"></i>
树形根节点图标
.z-ico.z-tree.z-30.z-lastnode 
    <i class="z-ico z-tree z-30 z-lastnode"></i>
指向下一个节点
.z-ico.z-tree.z-30.z-mlastnode 
    <i class="z-ico z-tree z-30 z-mlastnode"></i>
点击后收起菜单
.z-ico.z-tree.z-30.z-mnode 
    <i class="z-ico z-tree z-30 z-mnode"></i>
中间节点，点击后收起菜单
.z-ico.z-tree.z-30.z-node 
    <i class="z-ico z-tree z-30 z-node"></i>
指向节点
.z-ico.z-tree.z-30.z-plastnode 
    <i class="z-ico z-tree z-30 z-plastnode"></i>
点击后展开菜单
.z-ico.z-tree.z-30.z-pnode 
    <i class="z-ico z-tree z-30 z-pnode"></i>
中间节点，点击后展开菜单
.z-ico.z-tree.z-30.z-vertline 
    <i class="z-ico z-tree z-30 z-vertline"></i>
树形垂直线
.z-ico.z-tree.z-30.z-blank 
    <i class="z-ico z-tree z-30 z-blank"></i>
树形空白符
标准树形图标
.z-ico.z-tree.z-30.z-root.z-normal 
    <i class="z-ico z-tree z-30 z-root z-normal"></i>
树形根节点
.z-ico.z-tree.z-30.z-lastnode.z-normal 
    <i class="z-ico z-tree z-30 z-lastnode z-normal"></i>
指向下一节点
.z-ico.z-tree.z-30.z-mlastnode.z-normal 
    <i class="z-ico z-tree z-30 z-mlastnode z-normal"></i>
点击后展开菜单
.z-ico.z-tree.z-30.z-mnode.z-normal 
    <i class="z-ico z-tree z-30 z-mnode z-normal"></i>
中间节点，点击后展开菜单
.z-ico.z-tree.z-30.z-node.z-normal 
    <i class="z-ico z-tree z-30 z-node z-normal"></i>
指向节点
.z-ico.z-tree.z-30.z-plastnode.z-normal 
    <i class="z-ico z-tree z-30 z-plastnode z-normal"></i>
点击后收起菜单
.z-ico.z-tree.z-30.z-pnode.z-normal 
    <i class="z-ico z-tree z-30 z-pnode z-normal"></i>
中间节点，点击后收起菜单
.z-ico.z-tree.z-30.z-vertline.z-normal 
    <i class="z-ico z-tree z-30 z-vertline z-normal"></i>
树形垂直线
<#-- 常用小图标16px*16px -->
四、常用树型菜单中小图标(16px * 16px)
名称 代码 举例 说明
.z-ico.z-tree.z-item 
<i class="z-ico z-tree z-item"></i>
 子节点图标
.z-ico.z-tr z-tree z-30oup 
<i class="z-ico z-tree z-group"></i>
 组图标
.z-ico.z-tree.z-attribute 
<i class="z-ico z-tree z-attribute"></i>
 属性图标
.z-ico.z-tree.z-note 
<i class="z-ico z-tree z-note"></i>
 便笺图标
.z-ico.z-tree.z-user 
<i class="z-ico z-tree z-user"></i>
 用户图标
.z-ico.z-tree.z-close 
<i class="z-ico z-tree z-close"></i>
 文件夹图标，关闭状态
.z-ico.z-tree.z-open 
<i class="z-ico z-tree z-open"></i>
 文件夹图标，打开状态
.z-ico.z-tree.z-search 
<i class="z-ico z-tree z-search"></i>
 文件夹图标，搜索状态
.z-ico.z-tree.z-briefcase 
<i class="z-ico z-tree z-briefcase"></i>
 公文包图标
.z-ico.z-tree.z-users 
<i class="z-ico z-tree z-users"></i>
 多用户图标
.z-ico.z-tree.z-pass 
<i class="z-ico z-tree z-pass"></i>
 钥匙图标
.z-ico.z-tree.z-auth 
<i class="z-ico z-tree z-auth"></i>
 认证图标
.z-ico.z-tree.z-address 
<i class="z-ico z-tree z-address"></i>
 地址图标
.z-ico.z-tree.z-exit 
<i class="z-ico z-tree z-exit"></i>
 出口图标
.z-ico.z-tree.z-help 
<i class="z-ico z-tree z-help"></i>
 帮助图标
.z-ico.z-tree.z-network 
<i class="z-ico z-tree z-network"></i>
 网络图标
.z-ico.z-tree.z-recycle 
<i class="z-ico z-tree z-recycle"></i>
 回收站图标
.z-ico.z-tree.z-internet 
<i class="z-ico z-tree z-internet"></i>
 互联网图标
<#-- 五、箭头定义（三角型样式） -->
五、箭头定义（三角型样式）
名称 代码 举例 说明
.z-arrow 
<i class="z-arrow"></i>
 默认4像素向下
.z-arrow.z-up 
<i class="z-arrow z-up"></i>
 4像素向上
.z-arrow.z-left 
<i class="z-arrow z-left"></i>
 4像素向左
.z-arrow.z-right 
<i class="z-arrow z-right"></i>
 4像素向右
.z-arrow.z-px5 
<i class="z-arrow z-px5"></i>
 5像素向下
.z-arrow.z-up.z-px5 
<i class="z-arrow z-up z-px5"></i>
 5像素向上
.z-arrow.z-left.z-px5 
<i class="z-arrow z-left z-px5"></i>
 5像素向左
.z-arrow.z-right.z-px5 
<i class="z-arrow z-right z-px5"></i>
 5像素向右
.z-arrow.z-px8 
<i class="z-arrow z-px8"></i>
 8像素向下
.z-arrow.z-up.z-px8 
<i class="z-arrow z-up z-px8"></i>
 8像素向上
.z-arrow.z-left.z-px8 
<i class="z-arrow z-left z-px8"></i>
 8像素向左
.z-arrow.z-right.z-px8 
<i class="z-arrow z-right z-px8"></i>
 8像素向右
镂空箭头
.z-arrow span 
<i class="z-arrow z-relative-left"><span></span></i>
 镂空4像素向下
.z-arrow.z-up span 
<i class="z-arrow z-up z-relative-left"><span></span></i>
 镂空4像素向上
.z-arrow.z-left span 
<i class="z-arrow z-left z-relative-left"><span></span></i>
 镂空4像素向左
.z-arrow.z-right span 
<i class="z-arrow z-right z-relative-left"><span></span></i>
 镂空4像素向右
.z-arrow z-px5 span 
<i class="z-arrow z-px5 z-relative-left"><span></span></i>
 镂空5像素向下
.z-arrow z-up z-px5 span 
<i class="z-arrow z-up z-px5 z-relative-left"><span></span></i>
 镂空5像素向上
.z-arrow z-left z-px5 span 
<i class="z-arrow z-left z-px5 z-relative-left"><span></span></i>
 镂空5像素向左
.z-arrow z-right z-px5 span 
<i class="z-arrow z-right z-px5 z-relative-left"><span></span></i>
 镂空5像素向右
.z-arrow z-px8 span 
<i class="z-arrow z-px8 z-relative-left"><span></span></i>
 镂空8像素向下
.z-arrow z-up z-px8 span 
<i class="z-arrow z-up z-px8 z-relative-left"><span></span></i>
 镂空8像素向上
.z-arrow z-left z-px8 span 
<i class="z-arrow z-left z-px8 z-relative-left"><span></span></i>
 镂空8像素向左
.z-arrow z-right z-px8 span 
<i class="z-arrow z-right z-px8 z-relative-left"><span></span></i>
 镂空8像素向右
箭头颜色
.z-arrow.z-gray 
<i class="z-arrow z-gray"></i>
 默认4像素灰色向下
.z-arrow.z-up.z-gray 
<i class="z-arrow z-up z-gray"></i>
 4像素灰色向上
.z-arrow.z-left.z-gray 
<i class="z-arrow z-left z-gray"></i>
 4像素灰色向左
.z-arrow.z-right.z-gray 
<i class="z-arrow z-right z-gray"></i>
 4像素灰色向右
.z-arrow.z-px5.z-gray 
<i class="z-arrow z-px5 z-gray"></i>
 5像素灰色向下
.z-arrow.z-up.z-px5.z-gray 
<i class="z-arrow z-up z-px5 z-gray"></i>
 5像素灰色向上
.z-arrow.z-left.z-px5.z-gray 
<i class="z-arrow z-left z-px5 z-gray"></i>
 5像素灰色向左
.z-arrow.z-right.z-px5.z-gray 
<i class="z-arrow z-right z-px5 z-gray"></i>
 5像素灰色向右
.z-arrow.z-px8.z-gray 
<i class="z-arrow z-px8 z-gray"></i>
 8像素灰色向下
.z-arrow.z-up.z-px8.z-gray 
<i class="z-arrow z-up z-px8 z-gray"></i>
 8像素灰色向上
.z-arrow.z-left.z-px8.z-gray 
<i class="z-arrow z-left z-px8 z-gray"></i>
 8像素灰色向左
.z-arrow.z-right.z-px8.z-gray 
<i class="z-arrow z-right z-px8 z-gray"></i>
 8像素灰色向右
向上下、置顶底箭头图标
.z-arrow-move 
<i class="z-arrow-move"></i>
 上移
.z-arrow-move.z-bottom 
<z-arrow-move z-bottom"></i>
 下移
.z-arrow-move.z-up 
<i class="z-arrow-move z-up"></i>
 上移,无横线
.z-arrow-move.z-down 
<i class="z-arrow-move z-down"></i>
 下移,无横线
.z-arrow-move.z-top.z-disabled 
<i class="z-arrow-move z-top z-disabled"></i>
 上移，灰色
.z-arrow-move.z-bottom.z-disabled 
<z-arrow-move z-bottom z-disabled"></i>
 下移，灰色
.z-arrow-move.z-up.z-disabled 
<i class="z-arrow-move z-up z-disabled"></i>
 上移,无横线，灰色
.z-arrow-move.z-down.z-disabled 
<i class="z-arrow-move z-down z-disabled"></i>
 下移,无横线,灰色
<#-- 六、圆圈圆角定义（radius） -->
六、圆圈圆角定义（radius）
圆圈圆角定义
名称 代码 举例 说明
.z-round.z-white 
<i class="z-round z-white"></i>
 白色圆圈
.z-round.z-black 
<i class="z-round z-black"></i>
 黑色圆圈
.z-round.z-gray 
<i class="z-round z-gray"></i>
 灰色圆圈
.z-round.z-red 
<i class="z-round z-red"></i>
 红色圆圈
.z-round.z-orange 
<i class="z-round z-orange"></i>
 橘色圆圈
.z-round.z-yellow 
<i class="z-round z-yellow"></i>
 黄色圆圈
.z-round.z-green 
<i class="z-round z-green"></i>
 绿色圆圈
.z-round.z-cyan 
<i class="z-round z-cyan"></i>
 青色圆圈
.z-round.z-blue 
<i class="z-round z-blue"></i>
 蓝色圆圈
.z-round.z-purple 
<i class="z-round z-purple"></i>
 紫色圆圈
.z-round.z-black.z-bd-rd0 
<i class="z-round z-black z-bd-rd0"></i>
 黑色圆角为0像素
.z-round.z-black.z-bd-rd1 
<i class="z-round z-black z-bd-rd1"></i>
 黑色圆角为1个像素
.z-round.z-black.z-bd-rd2 
<i class="z-round z-black z-bd-rd2"></i>
 黑色圆角为2个像素
.z-round.z-black.z-bd-rd3 
<i class="z-round z-black z-bd-rd3"></i>
 黑色圆角为3个像素
.z-round.z-black.z-bd-rd5 
<i class="z-round z-black z-bd-rd5"></i>
 黑色圆角为5个像素
.z-round.z-black.z-bd-rd8 
<i class="z-round z-black z-bd-rd8"></i>
 黑色圆角为8个像素
.z-round.z-black.z-bd-rd10 
<i class="z-round z-black z-bd-rd10"></i>
 黑色圆角为10个像素
.z-round.z-black.z-bd-rd50p 
<i class="z-round z-black z-bd-rd50p"></i>
 黑色圆圈
.z-round.z-black.z-bd-rd0 
<i class="z-round z-black z-bd-rd0"></i>
 黑色圆角为0像素，优先定义
.z-round.z-black.z-bd-rd1 
<i class="z-round z-black z-bd-rd1"></i>
 黑色圆角为1个像素，优先定义
.z-round.z-black.z-bd-rd2 
<i class="z-round z-black z-bd-rd2"></i>
 黑色圆角为2个像素，优先定义
.z-round.z-black.z-bd-rd3 
<i class="z-round z-black z-bd-rd3"></i>
 黑色圆角为3个像素，优先定义
.z-round.z-black.z-bd-rd5 
<i class="z-round z-black z-bd-rd5"></i>
 黑色圆角为5个像素，优先定义
.z-round.z-black.z-bd-rd8 
<i class="z-round z-black z-bd-rd8"></i>
 黑色圆角为8个像素，优先定义
.z-round.z-black.z-bd-rd10 
<i class="z-round z-black z-bd-rd10"></i>
 黑色圆角为10个像素，优先定义
.z-round.z-black.z-bd-rd50p 
<i class="z-round z-black z-bd-rd50p"></i>
 黑色圆圈，优先定义
${zhiqim_com_chapter()}
${zhiqim_com_footer()}