mk-component

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> </head> <body> <div class="main markdown"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <i class="icon iconfont icon-kehuguanli"></i> <div class="name">客户管理</div> <div class="fontclass">.icon-kehuguanli</div> </li> <li> <i class="icon iconfont icon-caiwuhesuan"></i> <div class="name">财务核算</div> <div class="fontclass">.icon-caiwuhesuan</div> </li> <li> <i class="icon iconfont icon-gongzidan"></i> <div class="name">工资单</div> <div class="fontclass">.icon-gongzidan</div> </li> <li> <i class="icon iconfont icon-jingyingyuce"></i> <div class="name">经营预测</div> <div class="fontclass">.icon-jingyingyuce</div> </li> <li> <i class="icon iconfont icon-paigongguanli"></i> <div class="name">派工管理</div> <div class="fontclass">.icon-paigongguanli</div> </li> <li> <i class="icon iconfont icon-liushuizhang"></i> <div class="name">流水账</div> <div class="fontclass">.icon-liushuizhang</div> </li> <li> <i class="icon iconfont icon-shoufeiguanli"></i> <div class="name">收费管理</div> <div class="fontclass">.icon-shoufeiguanli</div> </li> <li> <i class="icon iconfont icon-pingzheng"></i> <div class="name">凭证</div> <div class="fontclass">.icon-pingzheng</div> </li> <li> <i class="icon iconfont icon-shuiwuguanli"></i> <div class="name">税务管理</div> <div class="fontclass">.icon-shuiwuguanli</div> </li> <li> <i class="icon iconfont icon-tongjibaobiao"></i> <div class="name">统计报表</div> <div class="fontclass">.icon-tongjibaobiao</div> </li> <li> <i class="icon iconfont icon-xitongshezhi"></i> <div class="name">系统设置</div> <div class="fontclass">.icon-xitongshezhi</div> </li> <li> <i class="icon iconfont icon-zhangbu"></i> <div class="name">账簿</div> <div class="fontclass">.icon-zhangbu</div> </li> <li> <i class="icon iconfont icon-bofangshipin"></i> <div class="name">播放视频</div> <div class="fontclass">.icon-bofangshipin</div> </li> <li> <i class="icon iconfont icon-bangzhu"></i> <div class="name">帮助</div> <div class="fontclass">.icon-bangzhu</div> </li> <li> <i class="icon iconfont icon-chaxun"></i> <div class="name">查询</div> <div class="fontclass">.icon-chaxun</div> </li> <li> <i class="icon iconfont icon-changyonggongnengshoucang"></i> <div class="name">常用功能收藏</div> <div class="fontclass">.icon-changyonggongnengshoucang</div> </li> <li> <i class="icon iconfont icon-denglu-yonghu"></i> <div class="name">登录-用户</div> <div class="fontclass">.icon-denglu-yonghu</div> </li> <li> <i class="icon iconfont icon-denglu-mima"></i> <div class="name">登录-密码</div> <div class="fontclass">.icon-denglu-mima</div> </li> <li> <i class="icon iconfont icon-dingyuehejifei"></i> <div class="name">订阅和计费</div> <div class="fontclass">.icon-dingyuehejifei</div> </li> <li> <i class="icon iconfont icon-guanyuwomen"></i> <div class="name">关于我们</div> <div class="fontclass">.icon-guanyuwomen</div> </li> <li> <i class="icon iconfont icon-laobanduan"></i> <div class="name">老板端</div> <div class="fontclass">.icon-laobanduan</div> </li> <li> <i class="icon iconfont icon-gerenxinxi"></i> <div class="name">个人信息</div> <div class="fontclass">.icon-gerenxinxi</div> </li> <li> <i class="icon iconfont icon-huanfu"></i> <div class="name">换肤</div> <div class="fontclass">.icon-huanfu</div> </li> <li> <i class="icon iconfont icon-kuozhan"></i> <div class="name">扩展</div> <div class="fontclass">.icon-kuozhan</div> </li> <li> <i class="icon iconfont icon-qiyegongsi"></i> <div class="name">企业公司</div> <div class="fontclass">.icon-qiyegongsi</div> </li> <li> <i class="icon iconfont icon-wodeyijia"></i> <div class="name">我的易嘉</div> <div class="fontclass">.icon-wodeyijia</div> </li> <li> <i class="icon iconfont icon-fenxiang"></i> <div class="name">分享</div> <div class="fontclass">.icon-fenxiang</div> </li> <li> <i class="icon iconfont icon-rengongfuwu"></i> <div class="name">人工服务</div> <div class="fontclass">.icon-rengongfuwu</div> </li> <li> <i class="icon iconfont icon-tuichu"></i> <div class="name">退出</div> <div class="fontclass">.icon-tuichu</div> </li> <li> <i class="icon iconfont icon-dianhuazixun"></i> <div class="name">电话咨询</div> <div class="fontclass">.icon-dianhuazixun</div> </li> <li> <i class="icon iconfont icon-erweima"></i> <div class="name">二维码</div> <div class="fontclass">.icon-erweima</div> </li> <li> <i class="icon iconfont icon-tongzhi"></i> <div class="name">通知</div> <div class="fontclass">.icon-tongzhi</div> </li> <li> <i class="icon iconfont icon-weibo"></i> <div class="name">微博</div> <div class="fontclass">.icon-weibo</div> </li> <li> <i class="icon iconfont icon-weixin"></i> <div class="name">微信</div> <div class="fontclass">.icon-weixin</div> </li> <li> <i class="icon iconfont icon-zaixianfuwu"></i> <div class="name">在线服务</div> <div class="fontclass">.icon-zaixianfuwu</div> </li> <li> <i class="icon iconfont icon-xiaoxi"></i> <div class="name">消息</div> <div class="fontclass">.icon-xiaoxi</div> </li> <li> <i class="icon iconfont icon-QQzixun"></i> <div class="name">QQ咨询</div> <div class="fontclass">.icon-QQzixun</div> </li> <li> <i class="icon iconfont icon-chehui"></i> <div class="name">撤回</div> <div class="fontclass">.icon-chehui</div> </li> <li> <i class="icon iconfont icon-chakan"></i> <div class="name">查看</div> <div class="fontclass">.icon-chakan</div> </li> <li> <i class="icon iconfont icon-fabu"></i> <div class="name">发布</div> <div class="fontclass">.icon-fabu</div> </li> <li> <i class="icon iconfont icon-bianji"></i> <div class="name">编辑</div> <div class="fontclass">.icon-bianji</div> </li> <li> <i class="icon iconfont icon-dayin"></i> <div class="name">打印</div> <div class="fontclass">.icon-dayin</div> </li> <li> <i class="icon iconfont icon-hetong"></i> <div class="name">合同</div> <div class="fontclass">.icon-hetong</div> </li> <li> <i class="icon iconfont icon-fanshenhe"></i> <div class="name">反审核</div> <div class="fontclass">.icon-fanshenhe</div> </li> <li> <i class="icon iconfont icon-shenhe"></i> <div class="name">审核</div> <div class="fontclass">.icon-shenhe</div> </li> <li> <i class="icon iconfont icon-jinrugongzidan"></i> <div class="name">进入工资单</div> <div class="fontclass">.icon-jinrugongzidan</div> </li> <li> <i class="icon iconfont icon-kuaijiejian"></i> <div class="name">快捷键</div> <div class="fontclass">.icon-kuaijiejian</div> </li> <li> <i class="icon iconfont icon-pingzhengmoban"></i> <div class="name">凭证模板</div> <div class="fontclass">.icon-pingzhengmoban</div> </li> <li> <i class="icon iconfont icon-paigong"></i> <div class="name">派工</div> <div class="fontclass">.icon-paigong</div> </li> <li> <i class="icon iconfont icon-rili"></i> <div class="name">日历</div> <div class="fontclass">.icon-rili</div> </li> <li> <i class="icon iconfont icon-paigongjilu"></i> <div class="name">派工记录</div> <div class="fontclass">.icon-paigongjilu</div> </li> <li> <i class="icon iconfont icon-shaixuan"></i> <div class="name">筛选</div> <div class="fontclass">.icon-shaixuan</div> </li> <li> <i class="icon iconfont icon-shangchuan"></i> <div class="name">上传</div> <div class="fontclass">.icon-shangchuan</div> </li> <li> <i class="icon iconfont icon-shanchu"></i> <div class="name">删除</div> <div class="fontclass">.icon-shanchu</div> </li> <li> <i class="icon iconfont icon-xiazai"></i> <div class="name">下载</div> <div class="fontclass">.icon-xiazai</div> </li> <li> <i class="icon iconfont icon-shuaxin"></i> <div class="name">刷新</div> <div class="fontclass">.icon-shuaxin</div> </li> <li> <i class="icon iconfont icon-yushen"></i> <div class="name">预审</div> <div class="fontclass">.icon-yushen</div> </li> <li> <i class="icon iconfont icon-zhongxinyaoqing"></i> <div class="name">重新邀请</div> <div class="fontclass">.icon-zhongxinyaoqing</div> </li> <li> <i class="icon iconfont icon-zhifujihua"></i> <div class="name">支付计划</div> <div class="fontclass">.icon-zhifujihua</div> </li> <li> <i class="icon iconfont icon-caidan-xiala"></i> <div class="name">菜单-下拉</div> <div class="fontclass">.icon-caidan-xiala</div> </li> <li> <i class="icon iconfont icon-gengduoxiala"></i> <div class="name">更多下拉</div> <div class="fontclass">.icon-gengduoxiala</div> </li> <li> <i class="icon iconfont icon-caidan-pingpu"></i> <div class="name">菜单-平铺</div> <div class="fontclass">.icon-caidan-pingpu</div> </li> <li> <i class="icon iconfont icon-tishi-jinggao"></i> <div class="name">提示-警告</div> <div class="fontclass">.icon-tishi-jinggao</div> </li> <li> <i class="icon iconfont icon-tishi-zhengque"></i> <div class="name">提示-正确</div> <div class="fontclass">.icon-tishi-zhengque</div> </li> <li> <i class="icon iconfont icon-tishi-cuowu"></i> <div class="name">提示-错误</div> <div class="fontclass">.icon-tishi-cuowu</div> </li> <li> <i class="icon iconfont icon-tishi-tishi"></i> <div class="name">提示-提示</div> <div class="fontclass">.icon-tishi-tishi</div> </li> <li> <i class="icon iconfont icon-guanbi"></i> <div class="name">关闭</div> <div class="fontclass">.icon-guanbi</div> </li> <li> <i class="icon iconfont icon-tingyong"></i> <div class="name">停用</div> <div class="fontclass">.icon-tingyong</div> </li> <li> <i class="icon iconfont icon-jianhang"></i> <div class="name">减行</div> <div class="fontclass">.icon-jianhang</div> </li> <li> <i class="icon iconfont icon-zenghang"></i> <div class="name">增行</div> <div class="fontclass">.icon-zenghang</div> </li> <li> <i class="icon iconfont icon-dankuangtishi-zhengque"></i> <div class="name">弹框提示-正确</div> <div class="fontclass">.icon-dankuangtishi-zhengque</div> </li> <li> <i class="icon iconfont icon-dankuangtishi-cuowu"></i> <div class="name">弹框提示-错误</div> <div class="fontclass">.icon-dankuangtishi-cuowu</div> </li> <li> <i class="icon iconfont icon-dankuangtishi-jinggao"></i> <div class="name">弹框提示-警告</div> <div class="fontclass">.icon-dankuangtishi-jinggao</div> </li> <li> <i class="icon iconfont icon-dankuangtishi-tishi"></i> <div class="name">弹框提示-提示</div> <div class="fontclass">.icon-dankuangtishi-tishi</div> </li> <li> <i class="icon iconfont icon-erji-he"></i> <div class="name">二级-合</div> <div class="fontclass">.icon-erji-he</div> </li> <li> <i class="icon iconfont icon-sanji"></i> <div class="name">三级</div> <div class="fontclass">.icon-sanji</div> </li> <li> <i class="icon iconfont icon-erji-zhan"></i> <div class="name">二级-展</div> <div class="fontclass">.icon-erji-zhan</div> </li> <li> <i class="icon iconfont icon-yiji"></i> <div class="name">一级</div> <div class="fontclass">.icon-yiji</div> </li> <li> <i class="icon iconfont icon-lipiao-qita"></i> <div class="name">理票-其他</div> <div class="fontclass">.icon-lipiao-qita</div> </li> <li> <i class="icon iconfont icon-lipiao-teshuyewu"></i> <div class="name">理票-特殊业务</div> <div class="fontclass">.icon-lipiao-teshuyewu</div> </li> <li> <i class="icon iconfont icon-lipiao-zhichu"></i> <div class="name">理票-支出</div> <div class="fontclass">.icon-lipiao-zhichu</div> </li> <li> <i class="icon iconfont icon-lipiao-shouru"></i> <div class="name">理票-收入</div> <div class="fontclass">.icon-lipiao-shouru</div> </li> <li> <i class="icon iconfont icon-shousuo"></i> <div class="name">收缩</div> <div class="fontclass">.icon-shousuo</div> </li> <li> <i class="icon iconfont icon-zhankai"></i> <div class="name">展开</div> <div class="fontclass">.icon-zhankai</div> </li> <li> <i class="icon iconfont icon-youyi"></i> <div class="name">右移</div> <div class="fontclass">.icon-youyi</div> </li> <li> <i class="icon iconfont icon-shangyi"></i> <div class="name">上移</div> <div class="fontclass">.icon-shangyi</div> </li> <li> <i class="icon iconfont icon-xiayi"></i> <div class="name">下移</div> <div class="fontclass">.icon-xiayi</div> </li> <li> <i class="icon iconfont icon-zhidi"></i> <div class="name">置底</div> <div class="fontclass">.icon-zhidi</div> </li> <li> <i class="icon iconfont icon-zhiding"></i> <div class="name">置顶</div> <div class="fontclass">.icon-zhiding</div> </li> <li> <i class="icon iconfont icon-zuoyi"></i> <div class="name">左移</div> <div class="fontclass">.icon-zuoyi</div> </li> <li> <i class="icon iconfont icon-beta-xia"></i> <div class="name">beta-xia</div> <div class="fontclass">.icon-beta-xia</div> </li> <li> <i class="icon iconfont icon-beta"></i> <div class="name">beta2</div> <div class="fontclass">.icon-beta</div> </li> <li> <i class="icon iconfont icon-shuiwushenbao"></i> <div class="name">税务申报</div> <div class="fontclass">.icon-shuiwushenbao</div> </li> <li> <i class="icon iconfont icon-daizhanggongsi"></i> <div class="name">代账公司2</div> <div class="fontclass">.icon-daizhanggongsi</div> </li> <li> <i class="icon iconfont icon-daizhanggongsi1"></i> <div class="name">代账公司</div> <div class="fontclass">.icon-daizhanggongsi1</div> </li> <li> <i class="icon iconfont icon-jiaojie"></i> <div class="name">交接</div> <div class="fontclass">.icon-jiaojie</div> </li> <li> <i class="icon iconfont icon-geshi-o"></i> <div class="name">格式-o</div> <div class="fontclass">.icon-geshi-o</div> </li> <li> <i class="icon iconfont icon-geshi-weizhi"></i> <div class="name">格式-未知</div> <div class="fontclass">.icon-geshi-weizhi</div> </li> <li> <i class="icon iconfont icon-geshi-p"></i> <div class="name">格式-p</div> <div class="fontclass">.icon-geshi-p</div> </li> <li> <i class="icon iconfont icon-geshi-pdf"></i> <div class="name">格式-pdf</div> <div class="fontclass">.icon-geshi-pdf</div> </li> <li> <i class="icon iconfont icon-geshi-w"></i> <div class="name">格式-w</div> <div class="fontclass">.icon-geshi-w</div> </li> <li> <i class="icon iconfont icon-geshi-pic"></i> <div class="name">格式-pic</div> <div class="fontclass">.icon-geshi-pic</div> </li> <li> <i class="icon iconfont icon-geshi-x"></i> <div class="name">格式-x</div> <div class="fontclass">.icon-geshi-x</div> </li> <li> <i class="icon iconfont icon-yishangchuanwenjian"></i> <div class="name">已上传文件</div> <div class="fontclass">.icon-yishangchuanwenjian</div> </li> <li> <i class="icon iconfont icon-geshi-n"></i> <div class="name">格式-n</div> <div class="fontclass">.icon-geshi-n</div> </li> <li> <i class="icon iconfont icon-geshi-yasuo"></i> <div class="name">格式-压缩</div> <div class="fontclass">.icon-geshi-yasuo</div> </li> <li> <i class="icon iconfont icon-paixu"></i> <div class="name">排序</div> <div class="fontclass">.icon-paixu</div> </li> <li> <i class="icon iconfont icon-jinxiaocun"></i> <div class="name">进销存</div> <div class="fontclass">.icon-jinxiaocun</div> </li> <li> <i class="icon iconfont icon-zichanguanli"></i> <div class="name">资产管理</div> <div class="fontclass">.icon-zichanguanli</div> </li> <li> <i class="icon iconfont icon-chuzhi"></i> <div class="name">处置</div> <div class="fontclass">.icon-chuzhi</div> </li> <li> <i class="icon iconfont icon-caogao"></i> <div class="name">草稿</div> <div class="fontclass">.icon-caogao</div> </li> <li> <i class="icon iconfont icon-lishijilu"></i> <div class="name">历史记录</div> <div class="fontclass">.icon-lishijilu</div> </li> <li> <i class="icon iconfont icon-qiyexinxi"></i> <div class="name">企业信息</div> <div class="fontclass">.icon-qiyexinxi</div> </li> <li> <i class="icon iconfont icon-wentiguanli"></i> <div class="name">问题管理</div> <div class="fontclass">.icon-wentiguanli</div> </li> <li> <i class="icon iconfont icon-fanjiezhang"></i> <div class="name">反结账</div> <div class="fontclass">.icon-fanjiezhang</div> </li> <li> <i class="icon iconfont icon-jiancha-qichuyue"></i> <div class="name">检查-期初余额</div> <div class="fontclass">.icon-jiancha-qichuyue</div> </li> <li> <i class="icon iconfont icon-jiancha-pingzhengshu"></i> <div class="name">检查-凭证数</div> <div class="fontclass">.icon-jiancha-pingzhengshu</div> </li> <li> <i class="icon iconfont icon-jiancha-pingzhengduanhao"></i> <div class="name">检查-凭证断号</div> <div class="fontclass">.icon-jiancha-pingzhengduanhao</div> </li> <li> <i class="icon iconfont icon-jiancha-sunyijiezhuan"></i> <div class="name">检查-损益结转</div> <div class="fontclass">.icon-jiancha-sunyijiezhuan</div> </li> <li> <i class="icon iconfont icon-jiancha-liushuizhang"></i> <div class="name">检查-流水账</div> <div class="fontclass">.icon-jiancha-liushuizhang</div> </li> <li> <i class="icon iconfont icon-jiancha-zichan"></i> <div class="name">检查-资产</div> <div class="fontclass">.icon-jiancha-zichan</div> </li> </ul> <h2 id="font-class-">font-class引用</h2> <hr> <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p> <p>与unicode使用方式相比，具有如下特点：</p> <ul> <li>兼容性良好，支持ie8+，及所有现代浏览器。</li> <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li> <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li> <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> </ul> <p>使用步骤如下：</p> <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3> <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> <blockquote> <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p> </blockquote> </div> </body> </html>