ziqim/zhiqim_ui/document/tutorial/uim/css/font.htm

<#def title = "字体图标"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分"/>
<#def prevUrl = "color.htm"/>
<#def nextUrl = "ico.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "css", "font")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "字体图标")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">什么是“字体图标”？</p>
    <p class="z-color-333" style="text-indent:38px;">
        “字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分
        操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
        字体图标不支持斜体，以便使用&lt;i&gt;标签来定义，如&lt;i class="z-font z-config"&gt;&lt;/i&gt;
    </p>
</div>

<#-- 操作类 -->
<div class="tutorial title">一、操作类图标，编码范围（f000-f03f），共18个</div>

<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
    <td width="26%">样式</td>
    <td width="10%">编码</td>
    <td width="*" colspan="10">图标</td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-config</td>
    <td class="z-samp">&amp;#xf000;</td>
    <td width="7%"><i class="z-font z-config"></i>&nbsp;字体</td>
    <td width="6%" class="z-bg-black"><i class="z-font z-config z-text-white"></i></td>
    <td width="6%"><i class="z-font z-config z-text-gray"></i></td>
    <td width="9%"><i class="z-font z-config z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td width="8%"><i class="z-font z-config z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td width="6%"><i class="z-font z-config z-text-yellow"></i></td>
    <td width="6%"><i class="z-font z-config z-text-green"></i></td>
    <td width="6%"><i class="z-font z-config z-text-cyan"></i></td>
    <td width="6%"><i class="z-font z-config z-text-blue"></i></td>
    <td width="6%"><i class="z-font z-config z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-add</td>
    <td class="z-samp">&amp;#xf001;</td>
    <td><i class="z-font z-add"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-add z-text-white"></i></td>
    <td><i class="z-font z-add z-text-gray"></i></td>
    <td><i class="z-font z-add z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-add z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-add z-text-yellow"></i></td>
    <td><i class="z-font z-add z-text-green"></i></td>
    <td><i class="z-font z-add z-text-cyan"></i></td>
    <td><i class="z-font z-add z-text-blue"></i></td>
    <td><i class="z-font z-add z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-modify</td>
    <td class="z-samp">&amp;#xf002;</td>
    <td><i class="z-font z-modify"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-modify z-text-white"></i></td>
    <td><i class="z-font z-modify z-text-gray"></i></td>
    <td><i class="z-font z-modify z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-modify z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-modify z-text-yellow"></i></td>
    <td><i class="z-font z-modify z-text-green"></i></td>
    <td><i class="z-font z-modify z-text-cyan"></i></td>
    <td><i class="z-font z-modify z-text-blue"></i></td>
    <td><i class="z-font z-modify z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-delete</td>
    <td class="z-samp">&amp;#xf003;</td>
    <td><i class="z-font z-delete"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-delete z-text-white"></i></td>
    <td><i class="z-font z-delete z-text-gray"></i></td>
    <td><i class="z-font z-delete z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-delete z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-delete z-text-yellow"></i></td>
    <td><i class="z-font z-delete z-text-green"></i></td>
    <td><i class="z-font z-delete z-text-cyan"></i></td>
    <td><i class="z-font z-delete z-text-blue"></i></td>
    <td><i class="z-font z-delete z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-query</td>
    <td class="z-samp">&amp;#xf004;</td>
    <td><i class="z-font z-query"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-query z-text-white"></i></td>
    <td><i class="z-font z-query z-text-gray"></i></td>
    <td><i class="z-font z-query z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-query z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-query z-text-yellow"></i></td>
    <td><i class="z-font z-query z-text-green"></i></td>
    <td><i class="z-font z-query z-text-cyan"></i></td>
    <td><i class="z-font z-query z-text-blue"></i></td>
    <td><i class="z-font z-query z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-previous</td>
    <td class="z-samp">&amp;#xf005;</td>
    <td><i class="z-font z-previous"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-previous z-text-white"></i></td>
    <td><i class="z-font z-previous z-text-gray"></i></td>
    <td><i class="z-font z-previous z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-previous z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-previous z-text-yellow"></i></td>
    <td><i class="z-font z-previous z-text-green"></i></td>
    <td><i class="z-font z-previous z-text-cyan"></i></td>
    <td><i class="z-font z-previous z-text-blue"></i></td>
    <td><i class="z-font z-previous z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-next</td>
    <td class="z-samp">&amp;#xf006;</td>
    <td><i class="z-font z-next"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-next z-text-white"></i></td>
    <td><i class="z-font z-next z-text-gray"></i></td>
    <td><i class="z-font z-next z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-next z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-next z-text-yellow"></i></td>
    <td><i class="z-font z-next z-text-green"></i></td>
    <td><i class="z-font z-next z-text-cyan"></i></td>
    <td><i class="z-font z-next z-text-blue"></i></td>
    <td><i class="z-font z-next z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-open</td>
    <td class="z-samp">&amp;#xf007;</td>
    <td><i class="z-font z-open"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-open z-text-white"></i></td>
    <td><i class="z-font z-open z-text-gray"></i></td>
    <td><i class="z-font z-open z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-open z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-open z-text-yellow"></i></td>
    <td><i class="z-font z-open z-text-green"></i></td>
    <td><i class="z-font z-open z-text-cyan"></i></td>
    <td><i class="z-font z-open z-text-blue"></i></td>
    <td><i class="z-font z-open z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-close</td>
    <td class="z-samp">&amp;#xf008;</td>
    <td><i class="z-font z-close"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-close z-text-white"></i></td>
    <td><i class="z-font z-close z-text-gray"></i></td>
    <td><i class="z-font z-close z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-close z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-close z-text-yellow"></i></td>
    <td><i class="z-font z-close z-text-green"></i></td>
    <td><i class="z-font z-close z-text-cyan"></i></td>
    <td><i class="z-font z-close z-text-blue"></i></td>
    <td><i class="z-font z-close z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-upload</td>
    <td class="z-samp">&amp;#xf009;</td>
    <td><i class="z-font z-upload"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-upload z-text-white"></i></td>
    <td><i class="z-font z-upload z-text-gray"></i></td>
    <td><i class="z-font z-upload z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-upload z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-upload z-text-yellow"></i></td>
    <td><i class="z-font z-upload z-text-green"></i></td>
    <td><i class="z-font z-upload z-text-cyan"></i></td>
    <td><i class="z-font z-upload z-text-blue"></i></td>
    <td><i class="z-font z-upload z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-save或.z-font.z-finish</td>
    <td class="z-samp">&amp;#xf00a;</td>
    <td><i class="z-font z-save"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-save z-text-white"></i></td>
    <td><i class="z-font z-save z-text-gray"></i></td>
    <td><i class="z-font z-save z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-save z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-save z-text-yellow"></i></td>
    <td><i class="z-font z-save z-text-green"></i></td>
    <td><i class="z-font z-save z-text-cyan"></i></td>
    <td><i class="z-font z-save z-text-blue"></i></td>
    <td><i class="z-font z-save z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-return</td>
    <td class="z-samp">&amp;#xf00b;</td>
    <td><i class="z-font z-return"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-return z-text-white"></i></td>
    <td><i class="z-font z-return z-text-gray"></i></td>
    <td><i class="z-font z-return z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-return z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-return z-text-yellow"></i></td>
    <td><i class="z-font z-return z-text-green"></i></td>
    <td><i class="z-font z-return z-text-cyan"></i></td>
    <td><i class="z-font z-return z-text-blue"></i></td>
    <td><i class="z-font z-return z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-refresh</td>
    <td class="z-samp">&amp;#xf00c;</td>
    <td><i class="z-font z-refresh"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-refresh z-text-white"></i></td>
    <td><i class="z-font z-refresh z-text-gray"></i></td>
    <td><i class="z-font z-refresh z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-refresh z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-refresh z-text-yellow"></i></td>
    <td><i class="z-font z-refresh z-text-green"></i></td>
    <td><i class="z-font z-refresh z-text-cyan"></i></td>
    <td><i class="z-font z-refresh z-text-blue"></i></td>
    <td><i class="z-font z-refresh z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-success</td>
    <td class="z-samp">&amp;#xf00d;</td>
    <td><i class="z-font z-success"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-success z-text-white"></i></td>
    <td><i class="z-font z-success z-text-gray"></i></td>
    <td><i class="z-font z-success z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-success z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-success z-text-yellow"></i></td>
    <td><i class="z-font z-success z-text-green"></i></td>
    <td><i class="z-font z-success z-text-cyan"></i></td>
    <td><i class="z-font z-success z-text-blue"></i></td>
    <td><i class="z-font z-success z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-error</td>
    <td class="z-samp">&amp;#xf00e;</td>
    <td><i class="z-font z-error"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-error z-text-white"></i></td>
    <td><i class="z-font z-error z-text-gray"></i></td>
    <td><i class="z-font z-error z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-error z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-error z-text-yellow"></i></td>
    <td><i class="z-font z-error z-text-green"></i></td>
    <td><i class="z-font z-error z-text-cyan"></i></td>
    <td><i class="z-font z-error z-text-blue"></i></td>
    <td><i class="z-font z-error z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-setting</td>
    <td class="z-samp">&amp;#xf00f;</td>
    <td><i class="z-font z-setting"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-setting z-text-white"></i></td>
    <td><i class="z-font z-setting z-text-gray"></i></td>
    <td><i class="z-font z-setting z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-setting z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-setting z-text-yellow"></i></td>
    <td><i class="z-font z-setting z-text-green"></i></td>
    <td><i class="z-font z-setting z-text-cyan"></i></td>
    <td><i class="z-font z-setting z-text-blue"></i></td>
    <td><i class="z-font z-setting z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-share</td>
    <td class="z-samp">&amp;#xf010;</td>
    <td><i class="z-font z-share"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-share z-text-white"></i></td>
    <td><i class="z-font z-share z-text-gray"></i></td>
    <td><i class="z-font z-share z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-share z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-share z-text-yellow"></i></td>
    <td><i class="z-font z-share z-text-green"></i></td>
    <td><i class="z-font z-share z-text-cyan"></i></td>
    <td><i class="z-font z-share z-text-blue"></i></td>
    <td><i class="z-font z-share z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-download</td>
    <td class="z-samp">&amp;#xf011;</td>
    <td><i class="z-font z-download"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-download z-text-white"></i></td>
    <td><i class="z-font z-download z-text-gray"></i></td>
    <td><i class="z-font z-download z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
    <td><i class="z-font z-download z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
    <td><i class="z-font z-download z-text-yellow"></i></td>
    <td><i class="z-font z-download z-text-green"></i></td>
    <td><i class="z-font z-download z-text-cyan"></i></td>
    <td><i class="z-font z-download z-text-blue"></i></td>
    <td><i class="z-font z-download z-text-purple"></i></td>
</tr>
</table>

<#-- 文档类 -->
<div class="tutorial title">二、文档类图标，编码范围（f040-f05f），共10个</div>

<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
    <td width="26%">样式</td>
    <td width="10%">编码</td>
    <td width="*" colspan="10">图标</td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-folder</td>
    <td class="z-samp">&amp;#xf040;</td>
    <td width="7%"><i class="z-font z-folder"></i>&nbsp;字体</td>
    <td width="6%" class="z-bg-black"><i class="z-font z-folder z-text-white"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-gray"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-red zi-px20"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-orange zi-px18"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-yellow"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-green"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-cyan"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-blue"></i></td>
    <td width="6%"><i class="z-font z-folder z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-collect</td>
    <td class="z-samp">&amp;#xf041;</td>
    <td><i class="z-font z-collect"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-collect z-text-white"></i></td>
    <td><i class="z-font z-collect z-text-gray"></i></td>
    <td><i class="z-font z-collect z-text-red zi-px20"></i></td>
    <td><i class="z-font z-collect z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-collect z-text-yellow"></i></td>
    <td><i class="z-font z-collect z-text-green"></i></td>
    <td><i class="z-font z-collect z-text-cyan"></i></td>
    <td><i class="z-font z-collect z-text-blue"></i></td>
    <td><i class="z-font z-collect z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-briefcase</td>
    <td class="z-samp">&amp;#xf042;</td>
    <td><i class="z-font z-briefcase"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-briefcase z-text-white"></i></td>
    <td><i class="z-font z-briefcase z-text-gray"></i></td>
    <td><i class="z-font z-briefcase z-text-red zi-px20"></i></td>
    <td><i class="z-font z-briefcase z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-briefcase z-text-yellow"></i></td>
    <td><i class="z-font z-briefcase z-text-green"></i></td>
    <td><i class="z-font z-briefcase z-text-cyan"></i></td>
    <td><i class="z-font z-briefcase z-text-blue"></i></td>
    <td><i class="z-font z-briefcase z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-image-text</td>
    <td class="z-samp">&amp;#xf043;</td>
    <td><i class="z-font z-image-text"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-image-text z-text-white"></i></td>
    <td><i class="z-font z-image-text z-text-gray"></i></td>
    <td><i class="z-font z-image-text z-text-red zi-px20"></i></td>
    <td><i class="z-font z-image-text z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-image-text z-text-yellow"></i></td>
    <td><i class="z-font z-image-text z-text-green"></i></td>
    <td><i class="z-font z-image-text z-text-cyan"></i></td>
    <td><i class="z-font z-image-text z-text-blue"></i></td>
    <td><i class="z-font z-image-text z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-text</td>
    <td class="z-samp">&amp;#xf044;</td>
    <td><i class="z-font z-text"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-text z-text-white"></i></td>
    <td><i class="z-font z-text z-text-gray"></i></td>
    <td><i class="z-font z-text z-text-red zi-px20"></i></td>
    <td><i class="z-font z-text z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-text z-text-yellow"></i></td>
    <td><i class="z-font z-text z-text-green"></i></td>
    <td><i class="z-font z-text z-text-cyan"></i></td>
    <td><i class="z-font z-text z-text-blue"></i></td>
    <td><i class="z-font z-text z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-picture</td>
    <td class="z-samp">&amp;#xf045;</td>
    <td><i class="z-font z-picture"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-picture z-text-white"></i></td>
    <td><i class="z-font z-picture z-text-gray"></i></td>
    <td><i class="z-font z-picture z-text-red zi-px20"></i></td>
    <td><i class="z-font z-picture z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-picture z-text-yellow"></i></td>
    <td><i class="z-font z-picture z-text-green"></i></td>
    <td><i class="z-font z-picture z-text-cyan"></i></td>
    <td><i class="z-font z-picture z-text-blue"></i></td>
    <td><i class="z-font z-picture z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-video</td>
    <td class="z-samp">&amp;#xf046;</td>
    <td><i class="z-font z-video"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-video z-text-white"></i></td>
    <td><i class="z-font z-video z-text-gray"></i></td>
    <td><i class="z-font z-video z-text-red zi-px20"></i></td>
    <td><i class="z-font z-video z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-video z-text-yellow"></i></td>
    <td><i class="z-font z-video z-text-green"></i></td>
    <td><i class="z-font z-video z-text-cyan"></i></td>
    <td><i class="z-font z-video z-text-blue"></i></td>
    <td><i class="z-font z-video z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-voice</td>
    <td class="z-samp">&amp;#xf047;</td>
    <td><i class="z-font z-voice"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-voice z-text-white"></i></td>
    <td><i class="z-font z-voice z-text-gray"></i></td>
    <td><i class="z-font z-voice z-text-red zi-px20"></i></td>
    <td><i class="z-font z-voice z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-voice z-text-yellow"></i></td>
    <td><i class="z-font z-voice z-text-green"></i></td>
    <td><i class="z-font z-voice z-text-cyan"></i></td>
    <td><i class="z-font z-voice z-text-blue"></i></td>
    <td><i class="z-font z-voice z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-camera</td>
    <td class="z-samp">&amp;#xf048;</td>
    <td><i class="z-font z-camera"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-camera z-text-white"></i></td>
    <td><i class="z-font z-camera z-text-gray"></i></td>
    <td><i class="z-font z-camera z-text-red zi-px20"></i></td>
    <td><i class="z-font z-camera z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-camera z-text-yellow"></i></td>
    <td><i class="z-font z-camera z-text-green"></i></td>
    <td><i class="z-font z-camera z-text-cyan"></i></td>
    <td><i class="z-font z-camera z-text-blue"></i></td>
    <td><i class="z-font z-camera z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-print</td>
    <td class="z-samp">&amp;#xf049;</td>
    <td><i class="z-font z-print"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-print z-text-white"></i></td>
    <td><i class="z-font z-print z-text-gray"></i></td>
    <td><i class="z-font z-print z-text-red zi-px20"></i></td>
    <td><i class="z-font z-print z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-print z-text-yellow"></i></td>
    <td><i class="z-font z-print z-text-green"></i></td>
    <td><i class="z-font z-print z-text-cyan"></i></td>
    <td><i class="z-font z-print z-text-blue"></i></td>
    <td><i class="z-font z-print z-text-purple"></i></td>
</tr>
</table>

<#-- 设备类 -->
<div class="tutorial title">三、设备类图标，编码范围（f060-f07f），共9个</div>

<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
    <td width="26%">样式</td>
    <td width="10%">编码</td>
    <td width="*" colspan="10">图标</td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-computer</td>
    <td class="z-samp">&amp;#xf060;</td>
    <td width="7%"><i class="z-font z-computer"></i>&nbsp;字体</td>
    <td width="6%" class="z-bg-black"><i class="z-font z-computer z-text-white"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-gray"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-red zi-px20"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-orange zi-px18"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-yellow"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-green"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-cyan"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-blue"></i></td>
    <td width="6%"><i class="z-font z-computer z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-phone</td>
    <td class="z-samp">&amp;#xf061;</td>
    <td><i class="z-font z-phone"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-phone z-text-white"></i></td>
    <td><i class="z-font z-phone z-text-gray"></i></td>
    <td><i class="z-font z-phone z-text-red zi-px20"></i></td>
    <td><i class="z-font z-phone z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-phone z-text-yellow"></i></td>
    <td><i class="z-font z-phone z-text-green"></i></td>
    <td><i class="z-font z-phone z-text-cyan"></i></td>
    <td><i class="z-font z-phone z-text-blue"></i></td>
    <td><i class="z-font z-phone z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-monitor</td>
    <td class="z-samp">&amp;#xf062;</td>
    <td><i class="z-font z-monitor"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-monitor z-text-white"></i></td>
    <td><i class="z-font z-monitor z-text-gray"></i></td>
    <td><i class="z-font z-monitor z-text-red zi-px20"></i></td>
    <td><i class="z-font z-monitor z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-monitor z-text-yellow"></i></td>
    <td><i class="z-font z-monitor z-text-green"></i></td>
    <td><i class="z-font z-monitor z-text-cyan"></i></td>
    <td><i class="z-font z-monitor z-text-blue"></i></td>
    <td><i class="z-font z-monitor z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-email</td>
    <td class="z-samp">&amp;#xf063;</td>
    <td><i class="z-font z-email"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-email z-text-white"></i></td>
    <td><i class="z-font z-email z-text-gray"></i></td>
    <td><i class="z-font z-email z-text-red zi-px20"></i></td>
    <td><i class="z-font z-email z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-email z-text-yellow"></i></td>
    <td><i class="z-font z-email z-text-green"></i></td>
    <td><i class="z-font z-email z-text-cyan"></i></td>
    <td><i class="z-font z-email z-text-blue"></i></td>
    <td><i class="z-font z-email z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-internet</td>
    <td class="z-samp">&amp;#xf064;</td>
    <td><i class="z-font z-internet"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-internet z-text-white"></i></td>
    <td><i class="z-font z-internet z-text-gray"></i></td>
    <td><i class="z-font z-internet z-text-red zi-px20"></i></td>
    <td><i class="z-font z-internet z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-internet z-text-yellow"></i></td>
    <td><i class="z-font z-internet z-text-green"></i></td>
    <td><i class="z-font z-internet z-text-cyan"></i></td>
    <td><i class="z-font z-internet z-text-blue"></i></td>
    <td><i class="z-font z-internet z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-switch</td>
    <td class="z-samp">&amp;#xf065;</td>
    <td><i class="z-font z-switch"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-switch z-text-white"></i></td>
    <td><i class="z-font z-switch z-text-gray"></i></td>
    <td><i class="z-font z-switch z-text-red zi-px20"></i></td>
    <td><i class="z-font z-switch z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-switch z-text-yellow"></i></td>
    <td><i class="z-font z-switch z-text-green"></i></td>
    <td><i class="z-font z-switch z-text-cyan"></i></td>
    <td><i class="z-font z-switch z-text-blue"></i></td>
    <td><i class="z-font z-switch z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-wifi</td>
    <td class="z-samp">&amp;#xf066;</td>
    <td><i class="z-font z-wifi"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-wifi z-text-white"></i></td>
    <td><i class="z-font z-wifi z-text-gray"></i></td>
    <td><i class="z-font z-wifi z-text-red zi-px20"></i></td>
    <td><i class="z-font z-wifi z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-wifi z-text-yellow"></i></td>
    <td><i class="z-font z-wifi z-text-green"></i></td>
    <td><i class="z-font z-wifi z-text-cyan"></i></td>
    <td><i class="z-font z-wifi z-text-blue"></i></td>
    <td><i class="z-font z-wifi z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-cloud</td>
    <td class="z-samp">&amp;#xf067;</td>
    <td><i class="z-font z-cloud"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-cloud z-text-white"></i></td>
    <td><i class="z-font z-cloud z-text-gray"></i></td>
    <td><i class="z-font z-cloud z-text-red zi-px20"></i></td>
    <td><i class="z-font z-cloud z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-cloud z-text-yellow"></i></td>
    <td><i class="z-font z-cloud z-text-green"></i></td>
    <td><i class="z-font z-cloud z-text-cyan"></i></td>
    <td><i class="z-font z-cloud z-text-blue"></i></td>
    <td><i class="z-font z-cloud z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-port</td>
    <td class="z-samp">&amp;#xf068;</td>
    <td><i class="z-font z-port"></i>&nbsp;字体</td>
    <td class="z-bg-black"><i class="z-font z-port z-text-white"></i></td>
    <td><i class="z-font z-port z-text-gray"></i></td>
    <td><i class="z-font z-port z-text-red zi-px20"></i></td>
    <td><i class="z-font z-port z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-port z-text-yellow"></i></td>
    <td><i class="z-font z-port z-text-green"></i></td>
    <td><i class="z-font z-port z-text-cyan"></i></td>
    <td><i class="z-font z-port z-text-blue"></i></td>
    <td><i class="z-font z-port z-text-purple"></i></td>
</tr>
</table>

<#-- 图表类 -->
<div class="tutorial title">四、图表类图标，编码范围（f080-f09f），共14个</div>

<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
    <td width="26%">样式</td>
    <td width="10%">编码</td>
    <td width="*" colspan="10">图标</td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-list</td>
    <td class="z-samp">&amp;#xf080;</td>
    <td width="6%"><i class="z-font z-list"></i></td>
    <td width="6%" class="z-bg-black"><i class="z-font z-list z-text-white"></i></td>
    <td width="6%"><i class="z-font z-list z-text-gray"></i></td>
    <td width="6%"><i class="z-font z-list z-text-red zi-px20"></i></td>
    <td width="6%"><i class="z-font z-list z-text-orange zi-px18"></i></td>
    <td width="6%"><i class="z-font z-list z-text-yellow"></i></td>
    <td width="6%"><i class="z-font z-list z-text-green"></i></td>
    <td width="6%"><i class="z-font z-list z-text-cyan"></i></td>
    <td width="6%"><i class="z-font z-list z-text-blue"></i></td>
    <td width="6%"><i class="z-font z-list z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-apps</td>
    <td class="z-samp">&amp;#xf081;</td>
    <td><i class="z-font z-apps"></i></td>
    <td class="z-bg-black"><i class="z-font z-apps z-text-white"></i></td>
    <td><i class="z-font z-apps z-text-gray"></i></td>
    <td><i class="z-font z-apps z-text-red zi-px20"></i></td>
    <td><i class="z-font z-apps z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-apps z-text-yellow"></i></td>
    <td><i class="z-font z-apps z-text-green"></i></td>
    <td><i class="z-font z-apps z-text-cyan"></i></td>
    <td><i class="z-font z-apps z-text-blue"></i></td>
    <td><i class="z-font z-apps z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-pie-chart</td>
    <td class="z-samp">&amp;#xf082;</td>
    <td><i class="z-font z-pie-chart"></i></td>
    <td class="z-bg-black"><i class="z-font z-pie-chart z-text-white"></i></td>
    <td><i class="z-font z-pie-chart z-text-gray"></i></td>
    <td><i class="z-font z-pie-chart z-text-red zi-px20"></i></td>
    <td><i class="z-font z-pie-chart z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-pie-chart z-text-yellow"></i></td>
    <td><i class="z-font z-pie-chart z-text-green"></i></td>
    <td><i class="z-font z-pie-chart z-text-cyan"></i></td>
    <td><i class="z-font z-pie-chart z-text-blue"></i></td>
    <td><i class="z-font z-pie-chart z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-histogram</td>
    <td class="z-samp">&amp;#xf083;</td>
    <td><i class="z-font z-histogram"></i></td>
    <td class="z-bg-black"><i class="z-font z-histogram z-text-white"></i></td>
    <td><i class="z-font z-histogram z-text-gray"></i></td>
    <td><i class="z-font z-histogram z-text-red zi-px20"></i></td>
    <td><i class="z-font z-histogram z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-histogram z-text-yellow"></i></td>
    <td><i class="z-font z-histogram z-text-green"></i></td>
    <td><i class="z-font z-histogram z-text-cyan"></i></td>
    <td><i class="z-font z-histogram z-text-blue"></i></td>
    <td><i class="z-font z-histogram z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-graph</td>
    <td class="z-samp">&amp;#xf084;</td>
    <td><i class="z-font z-graph"></i></td>
    <td class="z-bg-black"><i class="z-font z-graph z-text-white"></i></td>
    <td><i class="z-font z-graph z-text-gray"></i></td>
    <td><i class="z-font z-graph z-text-red zi-px20"></i></td>
    <td><i class="z-font z-graph z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-graph z-text-yellow"></i></td>
    <td><i class="z-font z-graph z-text-green"></i></td>
    <td><i class="z-font z-graph z-text-cyan"></i></td>
    <td><i class="z-font z-graph z-text-blue"></i></td>
    <td><i class="z-font z-graph z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-diagram</td>
    <td class="z-samp">&amp;#xf085;</td>
    <td><i class="z-font z-diagram"></i></td>
    <td class="z-bg-black"><i class="z-font z-diagram z-text-white"></i></td>
    <td><i class="z-font z-diagram z-text-gray"></i></td>
    <td><i class="z-font z-diagram z-text-red zi-px20"></i></td>
    <td><i class="z-font z-diagram z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-diagram z-text-yellow"></i></td>
    <td><i class="z-font z-diagram z-text-green"></i></td>
    <td><i class="z-font z-diagram z-text-cyan"></i></td>
    <td><i class="z-font z-diagram z-text-blue"></i></td>
    <td><i class="z-font z-diagram z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrow-down</td>
    <td class="z-samp">&amp;#xf086;</td>
    <td><i class="z-font z-arrow-down"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrow-down z-text-white"></i></td>
    <td><i class="z-font z-arrow-down z-text-gray"></i></td>
    <td><i class="z-font z-arrow-down z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrow-down z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrow-down z-text-yellow"></i></td>
    <td><i class="z-font z-arrow-down z-text-green"></i></td>
    <td><i class="z-font z-arrow-down z-text-cyan"></i></td>
    <td><i class="z-font z-arrow-down z-text-blue"></i></td>
    <td><i class="z-font z-arrow-down z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrow-up</td>
    <td class="z-samp">&amp;#xf087;</td>
    <td><i class="z-font z-arrow-up"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrow-up z-text-white"></i></td>
    <td><i class="z-font z-arrow-up z-text-gray"></i></td>
    <td><i class="z-font z-arrow-up z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrow-up z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrow-up z-text-yellow"></i></td>
    <td><i class="z-font z-arrow-up z-text-green"></i></td>
    <td><i class="z-font z-arrow-up z-text-cyan"></i></td>
    <td><i class="z-font z-arrow-up z-text-blue"></i></td>
    <td><i class="z-font z-arrow-up z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrow-left</td>
    <td class="z-samp">&amp;#xf088;</td>
    <td><i class="z-font z-arrow-left"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrow-left z-text-white"></i></td>
    <td><i class="z-font z-arrow-left z-text-gray"></i></td>
    <td><i class="z-font z-arrow-left z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrow-left z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrow-left z-text-yellow"></i></td>
    <td><i class="z-font z-arrow-left z-text-green"></i></td>
    <td><i class="z-font z-arrow-left z-text-cyan"></i></td>
    <td><i class="z-font z-arrow-left z-text-blue"></i></td>
    <td><i class="z-font z-arrow-left z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrow-right</td>
    <td class="z-samp">&amp;#xf089;</td>
    <td><i class="z-font z-arrow-right"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrow-right z-text-white"></i></td>
    <td><i class="z-font z-arrow-right z-text-gray"></i></td>
    <td><i class="z-font z-arrow-right z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrow-right z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrow-right z-text-yellow"></i></td>
    <td><i class="z-font z-arrow-right z-text-green"></i></td>
    <td><i class="z-font z-arrow-right z-text-cyan"></i></td>
    <td><i class="z-font z-arrow-right z-text-blue"></i></td>
    <td><i class="z-font z-arrow-right z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrowhead-down</td>
    <td class="z-samp">&amp;#xf08a;</td>
    <td><i class="z-font z-arrowhead-down"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrowhead-down z-text-white"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-gray"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-yellow"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-green"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-cyan"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-blue"></i></td>
    <td><i class="z-font z-arrowhead-down z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrowhead-up</td>
    <td class="z-samp">&amp;#xf08b;</td>
    <td><i class="z-font z-arrowhead-up"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrowhead-up z-text-white"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-gray"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-yellow"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-green"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-cyan"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-blue"></i></td>
    <td><i class="z-font z-arrowhead-up z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrowhead-left</td>
    <td class="z-samp">&amp;#xf08c;</td>
    <td><i class="z-font z-arrowhead-left"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrowhead-left z-text-white"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-gray"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-yellow"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-green"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-cyan"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-blue"></i></td>
    <td><i class="z-font z-arrowhead-left z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-arrowhead-right</td>
    <td class="z-samp">&amp;#xf08c;</td>
    <td><i class="z-font z-arrowhead-right"></i></td>
    <td class="z-bg-black"><i class="z-font z-arrowhead-right z-text-white"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-gray"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-red zi-px20"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-yellow"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-green"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-cyan"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-blue"></i></td>
    <td><i class="z-font z-arrowhead-right z-text-purple"></i></td>
</tr>
</table>

<#-- 实体类 -->
<div class="tutorial title">五、实体类图标，编码范围（f0a0-f0bf），共8个</div>

<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
    <td width="26%">样式</td>
    <td width="10%">编码</td>
    <td width="*" colspan="10">图标</td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-customer</td>
    <td class="z-samp">&amp;#xf0a0;</td>
    <td width="6%"><i class="z-font z-customer"></i></td>
    <td width="6%" class="z-bg-black"><i class="z-font z-customer z-text-white"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-gray"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-red zi-px20"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-orange zi-px18"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-yellow"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-green"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-cyan"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-blue"></i></td>
    <td width="6%"><i class="z-font z-customer z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-cash</td>
    <td class="z-samp">&amp;#xf0a1;</td>
    <td><i class="z-font z-cash"></i></td>
    <td class="z-bg-black"><i class="z-font z-cash z-text-white"></i></td>
    <td><i class="z-font z-cash z-text-gray"></i></td>
    <td><i class="z-font z-cash z-text-red zi-px20"></i></td>
    <td><i class="z-font z-cash z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-cash z-text-yellow"></i></td>
    <td><i class="z-font z-cash z-text-green"></i></td>
    <td><i class="z-font z-cash z-text-cyan"></i></td>
    <td><i class="z-font z-cash z-text-blue"></i></td>
    <td><i class="z-font z-cash z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-house</td>
    <td class="z-samp">&amp;#xf0a2;</td>
    <td><i class="z-font z-house"></i></td>
    <td class="z-bg-black"><i class="z-font z-house z-text-white"></i></td>
    <td><i class="z-font z-house z-text-gray"></i></td>
    <td><i class="z-font z-house z-text-red zi-px20"></i></td>
    <td><i class="z-font z-house z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-house z-text-yellow"></i></td>
    <td><i class="z-font z-house z-text-green"></i></td>
    <td><i class="z-font z-house z-text-cyan"></i></td>
    <td><i class="z-font z-house z-text-blue"></i></td>
    <td><i class="z-font z-house z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-flower</td>
    <td class="z-samp">&amp;#xf0a3;</td>
    <td><i class="z-font z-flower"></i></td>
    <td class="z-bg-black"><i class="z-font z-flower z-text-white"></i></td>
    <td><i class="z-font z-flower z-text-gray"></i></td>
    <td><i class="z-font z-flower z-text-red zi-px20"></i></td>
    <td><i class="z-font z-flower z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-flower z-text-yellow"></i></td>
    <td><i class="z-font z-flower z-text-green"></i></td>
    <td><i class="z-font z-flower z-text-cyan"></i></td>
    <td><i class="z-font z-flower z-text-blue"></i></td>
    <td><i class="z-font z-flower z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-box</td>
    <td class="z-samp">&amp;#xf0a4;</td>
    <td><i class="z-font z-box"></i></td>
    <td class="z-bg-black"><i class="z-font z-box z-text-white"></i></td>
    <td><i class="z-font z-box z-text-gray"></i></td>
    <td><i class="z-font z-box z-text-red zi-px20"></i></td>
    <td><i class="z-font z-box z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-box z-text-yellow"></i></td>
    <td><i class="z-font z-box z-text-green"></i></td>
    <td><i class="z-font z-box z-text-cyan"></i></td>
    <td><i class="z-font z-box z-text-blue"></i></td>
    <td><i class="z-font z-box z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-desk</td>
    <td class="z-samp">&amp;#xf0a5;</td>
    <td><i class="z-font z-desk"></i></td>
    <td class="z-bg-black"><i class="z-font z-desk z-text-white"></i></td>
    <td><i class="z-font z-desk z-text-gray"></i></td>
    <td><i class="z-font z-desk z-text-red zi-px20"></i></td>
    <td><i class="z-font z-desk z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-desk z-text-yellow"></i></td>
    <td><i class="z-font z-desk z-text-green"></i></td>
    <td><i class="z-font z-desk z-text-cyan"></i></td>
    <td><i class="z-font z-desk z-text-blue"></i></td>
    <td><i class="z-font z-desk z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-gift</td>
    <td class="z-samp">&amp;#xf0a6;</td>
    <td><i class="z-font z-gift"></i></td>
    <td class="z-bg-black"><i class="z-font z-gift z-text-white"></i></td>
    <td><i class="z-font z-gift z-text-gray"></i></td>
    <td><i class="z-font z-gift z-text-red zi-px20"></i></td>
    <td><i class="z-font z-gift z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-gift z-text-yellow"></i></td>
    <td><i class="z-font z-gift z-text-green"></i></td>
    <td><i class="z-font z-gift z-text-cyan"></i></td>
    <td><i class="z-font z-gift z-text-blue"></i></td>
    <td><i class="z-font z-gift z-text-purple"></i></td>
</tr>
<tr>
    <td class="z-samp">.z-font.z-lock</td>
    <td class="z-samp">&amp;#xf0a7;</td>
    <td><i class="z-font z-lock"></i></td>
    <td class="z-bg-black"><i class="z-font z-lock z-text-white"></i></td>
    <td><i class="z-font z-lock z-text-gray"></i></td>
    <td><i class="z-font z-lock z-text-red zi-px20"></i></td>
    <td><i class="z-font z-lock z-text-orange zi-px18"></i></td>
    <td><i class="z-font z-lock z-text-yellow"></i></td>
    <td><i class="z-font z-lock z-text-green"></i></td>
    <td><i class="z-font z-lock z-text-cyan"></i></td>
    <td><i class="z-font z-lock z-text-blue"></i></td>
    <td><i class="z-font z-lock z-text-purple"></i></td>
</tr>
</table>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}