mk-component

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <script src="iconfont.js"></script> <style type="text/css"> .icon { /* 通过设置 font-size 来改变图标大小 */ width: 1em; height: 1em; /* 图标和文字相邻时，垂直对齐 */ vertical-align: -0.15em; /* 通过设置 color 来改变 SVG 的颜色/fill */ fill: currentColor; /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 normalize.css 中也包含这行 */ overflow: hidden; } </style> </head> <body> <div class="main markdown"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kehuguanli"></use> </svg> <div class="name">客户管理</div> <div class="fontclass">#icon-kehuguanli</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-caiwuhesuan"></use> </svg> <div class="name">财务核算</div> <div class="fontclass">#icon-caiwuhesuan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gongzidan"></use> </svg> <div class="name">工资单</div> <div class="fontclass">#icon-gongzidan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jingyingyuce"></use> </svg> <div class="name">经营预测</div> <div class="fontclass">#icon-jingyingyuce</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-paigongguanli"></use> </svg> <div class="name">派工管理</div> <div class="fontclass">#icon-paigongguanli</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-liushuizhang"></use> </svg> <div class="name">流水账</div> <div class="fontclass">#icon-liushuizhang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shoufeiguanli"></use> </svg> <div class="name">收费管理</div> <div class="fontclass">#icon-shoufeiguanli</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pingzheng"></use> </svg> <div class="name">凭证</div> <div class="fontclass">#icon-pingzheng</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shuiwuguanli"></use> </svg> <div class="name">税务管理</div> <div class="fontclass">#icon-shuiwuguanli</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tongjibaobiao"></use> </svg> <div class="name">统计报表</div> <div class="fontclass">#icon-tongjibaobiao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xitongshezhi"></use> </svg> <div class="name">系统设置</div> <div class="fontclass">#icon-xitongshezhi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhangbu"></use> </svg> <div class="name">账簿</div> <div class="fontclass">#icon-zhangbu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bofangshipin"></use> </svg> <div class="name">播放视频</div> <div class="fontclass">#icon-bofangshipin</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bangzhu"></use> </svg> <div class="name">帮助</div> <div class="fontclass">#icon-bangzhu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chaxun"></use> </svg> <div class="name">查询</div> <div class="fontclass">#icon-chaxun</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-changyonggongnengshoucang"></use> </svg> <div class="name">常用功能收藏</div> <div class="fontclass">#icon-changyonggongnengshoucang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-denglu-yonghu"></use> </svg> <div class="name">登录-用户</div> <div class="fontclass">#icon-denglu-yonghu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-denglu-mima"></use> </svg> <div class="name">登录-密码</div> <div class="fontclass">#icon-denglu-mima</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dingyuehejifei"></use> </svg> <div class="name">订阅和计费</div> <div class="fontclass">#icon-dingyuehejifei</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanyuwomen"></use> </svg> <div class="name">关于我们</div> <div class="fontclass">#icon-guanyuwomen</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-laobanduan"></use> </svg> <div class="name">老板端</div> <div class="fontclass">#icon-laobanduan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gerenxinxi"></use> </svg> <div class="name">个人信息</div> <div class="fontclass">#icon-gerenxinxi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-huanfu"></use> </svg> <div class="name">换肤</div> <div class="fontclass">#icon-huanfu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kuozhan"></use> </svg> <div class="name">扩展</div> <div class="fontclass">#icon-kuozhan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-qiyegongsi"></use> </svg> <div class="name">企业公司</div> <div class="fontclass">#icon-qiyegongsi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wodeyijia"></use> </svg> <div class="name">我的易嘉</div> <div class="fontclass">#icon-wodeyijia</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fenxiang"></use> </svg> <div class="name">分享</div> <div class="fontclass">#icon-fenxiang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-rengongfuwu"></use> </svg> <div class="name">人工服务</div> <div class="fontclass">#icon-rengongfuwu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tuichu"></use> </svg> <div class="name">退出</div> <div class="fontclass">#icon-tuichu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dianhuazixun"></use> </svg> <div class="name">电话咨询</div> <div class="fontclass">#icon-dianhuazixun</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-erweima"></use> </svg> <div class="name">二维码</div> <div class="fontclass">#icon-erweima</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tongzhi"></use> </svg> <div class="name">通知</div> <div class="fontclass">#icon-tongzhi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-weibo"></use> </svg> <div class="name">微博</div> <div class="fontclass">#icon-weibo</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-weixin"></use> </svg> <div class="name">微信</div> <div class="fontclass">#icon-weixin</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zaixianfuwu"></use> </svg> <div class="name">在线服务</div> <div class="fontclass">#icon-zaixianfuwu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xiaoxi"></use> </svg> <div class="name">消息</div> <div class="fontclass">#icon-xiaoxi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-QQzixun"></use> </svg> <div class="name">QQ咨询</div> <div class="fontclass">#icon-QQzixun</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chehui"></use> </svg> <div class="name">撤回</div> <div class="fontclass">#icon-chehui</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chakan"></use> </svg> <div class="name">查看</div> <div class="fontclass">#icon-chakan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fabu"></use> </svg> <div class="name">发布</div> <div class="fontclass">#icon-fabu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bianji"></use> </svg> <div class="name">编辑</div> <div class="fontclass">#icon-bianji</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dayin"></use> </svg> <div class="name">打印</div> <div class="fontclass">#icon-dayin</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-hetong"></use> </svg> <div class="name">合同</div> <div class="fontclass">#icon-hetong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fanshenhe"></use> </svg> <div class="name">反审核</div> <div class="fontclass">#icon-fanshenhe</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shenhe"></use> </svg> <div class="name">审核</div> <div class="fontclass">#icon-shenhe</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jinrugongzidan"></use> </svg> <div class="name">进入工资单</div> <div class="fontclass">#icon-jinrugongzidan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kuaijiejian"></use> </svg> <div class="name">快捷键</div> <div class="fontclass">#icon-kuaijiejian</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pingzhengmoban"></use> </svg> <div class="name">凭证模板</div> <div class="fontclass">#icon-pingzhengmoban</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-paigong"></use> </svg> <div class="name">派工</div> <div class="fontclass">#icon-paigong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-rili"></use> </svg> <div class="name">日历</div> <div class="fontclass">#icon-rili</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-paigongjilu"></use> </svg> <div class="name">派工记录</div> <div class="fontclass">#icon-paigongjilu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shaixuan"></use> </svg> <div class="name">筛选</div> <div class="fontclass">#icon-shaixuan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shangchuan"></use> </svg> <div class="name">上传</div> <div class="fontclass">#icon-shangchuan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shanchu"></use> </svg> <div class="name">删除</div> <div class="fontclass">#icon-shanchu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xiazai"></use> </svg> <div class="name">下载</div> <div class="fontclass">#icon-xiazai</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shuaxin"></use> </svg> <div class="name">刷新</div> <div class="fontclass">#icon-shuaxin</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yushen"></use> </svg> <div class="name">预审</div> <div class="fontclass">#icon-yushen</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhongxinyaoqing"></use> </svg> <div class="name">重新邀请</div> <div class="fontclass">#icon-zhongxinyaoqing</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhifujihua"></use> </svg> <div class="name">支付计划</div> <div class="fontclass">#icon-zhifujihua</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-caidan-xiala"></use> </svg> <div class="name">菜单-下拉</div> <div class="fontclass">#icon-caidan-xiala</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gengduoxiala"></use> </svg> <div class="name">更多下拉</div> <div class="fontclass">#icon-gengduoxiala</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-caidan-pingpu"></use> </svg> <div class="name">菜单-平铺</div> <div class="fontclass">#icon-caidan-pingpu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tishi-jinggao"></use> </svg> <div class="name">提示-警告</div> <div class="fontclass">#icon-tishi-jinggao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tishi-zhengque"></use> </svg> <div class="name">提示-正确</div> <div class="fontclass">#icon-tishi-zhengque</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tishi-cuowu"></use> </svg> <div class="name">提示-错误</div> <div class="fontclass">#icon-tishi-cuowu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tishi-tishi"></use> </svg> <div class="name">提示-提示</div> <div class="fontclass">#icon-tishi-tishi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-guanbi"></use> </svg> <div class="name">关闭</div> <div class="fontclass">#icon-guanbi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tingyong"></use> </svg> <div class="name">停用</div> <div class="fontclass">#icon-tingyong</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jianhang"></use> </svg> <div class="name">减行</div> <div class="fontclass">#icon-jianhang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zenghang"></use> </svg> <div class="name">增行</div> <div class="fontclass">#icon-zenghang</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dankuangtishi-zhengque"></use> </svg> <div class="name">弹框提示-正确</div> <div class="fontclass">#icon-dankuangtishi-zhengque</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dankuangtishi-cuowu"></use> </svg> <div class="name">弹框提示-错误</div> <div class="fontclass">#icon-dankuangtishi-cuowu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dankuangtishi-jinggao"></use> </svg> <div class="name">弹框提示-警告</div> <div class="fontclass">#icon-dankuangtishi-jinggao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dankuangtishi-tishi"></use> </svg> <div class="name">弹框提示-提示</div> <div class="fontclass">#icon-dankuangtishi-tishi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-erji-he"></use> </svg> <div class="name">二级-合</div> <div class="fontclass">#icon-erji-he</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-sanji"></use> </svg> <div class="name">三级</div> <div class="fontclass">#icon-sanji</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-erji-zhan"></use> </svg> <div class="name">二级-展</div> <div class="fontclass">#icon-erji-zhan</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yiji"></use> </svg> <div class="name">一级</div> <div class="fontclass">#icon-yiji</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lipiao-qita"></use> </svg> <div class="name">理票-其他</div> <div class="fontclass">#icon-lipiao-qita</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lipiao-teshuyewu"></use> </svg> <div class="name">理票-特殊业务</div> <div class="fontclass">#icon-lipiao-teshuyewu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lipiao-zhichu"></use> </svg> <div class="name">理票-支出</div> <div class="fontclass">#icon-lipiao-zhichu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lipiao-shouru"></use> </svg> <div class="name">理票-收入</div> <div class="fontclass">#icon-lipiao-shouru</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shousuo"></use> </svg> <div class="name">收缩</div> <div class="fontclass">#icon-shousuo</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhankai"></use> </svg> <div class="name">展开</div> <div class="fontclass">#icon-zhankai</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-youyi"></use> </svg> <div class="name">右移</div> <div class="fontclass">#icon-youyi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shangyi"></use> </svg> <div class="name">上移</div> <div class="fontclass">#icon-shangyi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xiayi"></use> </svg> <div class="name">下移</div> <div class="fontclass">#icon-xiayi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhidi"></use> </svg> <div class="name">置底</div> <div class="fontclass">#icon-zhidi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zhiding"></use> </svg> <div class="name">置顶</div> <div class="fontclass">#icon-zhiding</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zuoyi"></use> </svg> <div class="name">左移</div> <div class="fontclass">#icon-zuoyi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-beta-xia"></use> </svg> <div class="name">beta-xia</div> <div class="fontclass">#icon-beta-xia</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-beta"></use> </svg> <div class="name">beta2</div> <div class="fontclass">#icon-beta</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-shuiwushenbao"></use> </svg> <div class="name">税务申报</div> <div class="fontclass">#icon-shuiwushenbao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-daizhanggongsi"></use> </svg> <div class="name">代账公司2</div> <div class="fontclass">#icon-daizhanggongsi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-daizhanggongsi1"></use> </svg> <div class="name">代账公司</div> <div class="fontclass">#icon-daizhanggongsi1</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jiaojie"></use> </svg> <div class="name">交接</div> <div class="fontclass">#icon-jiaojie</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-o"></use> </svg> <div class="name">格式-o</div> <div class="fontclass">#icon-geshi-o</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-weizhi"></use> </svg> <div class="name">格式-未知</div> <div class="fontclass">#icon-geshi-weizhi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-p"></use> </svg> <div class="name">格式-p</div> <div class="fontclass">#icon-geshi-p</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-pdf"></use> </svg> <div class="name">格式-pdf</div> <div class="fontclass">#icon-geshi-pdf</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-w"></use> </svg> <div class="name">格式-w</div> <div class="fontclass">#icon-geshi-w</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-pic"></use> </svg> <div class="name">格式-pic</div> <div class="fontclass">#icon-geshi-pic</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-x"></use> </svg> <div class="name">格式-x</div> <div class="fontclass">#icon-geshi-x</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yishangchuanwenjian"></use> </svg> <div class="name">已上传文件</div> <div class="fontclass">#icon-yishangchuanwenjian</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-n"></use> </svg> <div class="name">格式-n</div> <div class="fontclass">#icon-geshi-n</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-geshi-yasuo"></use> </svg> <div class="name">格式-压缩</div> <div class="fontclass">#icon-geshi-yasuo</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-paixu"></use> </svg> <div class="name">排序</div> <div class="fontclass">#icon-paixu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jinxiaocun"></use> </svg> <div class="name">进销存</div> <div class="fontclass">#icon-jinxiaocun</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-zichanguanli"></use> </svg> <div class="name">资产管理</div> <div class="fontclass">#icon-zichanguanli</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chuzhi"></use> </svg> <div class="name">处置</div> <div class="fontclass">#icon-chuzhi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-caogao"></use> </svg> <div class="name">草稿</div> <div class="fontclass">#icon-caogao</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lishijilu"></use> </svg> <div class="name">历史记录</div> <div class="fontclass">#icon-lishijilu</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-qiyexinxi"></use> </svg> <div class="name">企业信息</div> <div class="fontclass">#icon-qiyexinxi</div> </li> <li> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wentiguanli"></use> </svg> <div class="name">问题管理</div> <div class="fontclass">#icon-wentiguanli</div> </li> </ul> <h2 id="symbol-">symbol引用</h2> <hr> <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p> <ul> <li>支持多色图标了，不再受单色限制。</li> <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li> <li>兼容性较差，支持 ie9+,及现代浏览器。</li> <li>浏览器渲染svg的性能一般，还不如png。</li> </ul> <p>使用步骤如下：</p> <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3> <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3> <pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> .icon { width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; vertical-align: <span class="hljs-number">-0.15</span>em; fill: currentColor; overflow: hidden; } <<span class="hljs-regexp">/style></span></code></pre> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> <<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> </span><<span class="hljs-regexp">/svg> </span></code></pre> </div> </body> </html>