UNPKG

cdt-cli

Version:

A simple CLI for creating your projects

1,505 lines (1,296 loc) 118 kB
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont Demo</title> <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> <script src="iconfont.js"></script> <!-- jQuery --> <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> <!-- 代码高亮 --> <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> </head> <body> <div class="main"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1> <div class="nav-tabs"> <ul id="tabs" class="dib-box"> <li class="dib active"><span>Unicode</span></li> <li class="dib"><span>Font class</span></li> <li class="dib"><span>Symbol</span></li> </ul> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1376049" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont">&#xe600;</span> <div class="name">新增 圆</div> <div class="code-name">&amp;#xe600;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61e;</span> <div class="name">图片</div> <div class="code-name">&amp;#xe61e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe7ab;</span> <div class="name">图层</div> <div class="code-name">&amp;#xe7ab;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe695;</span> <div class="name">跳转</div> <div class="code-name">&amp;#xe695;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61b;</span> <div class="name">clock</div> <div class="code-name">&amp;#xe61b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe69f;</span> <div class="name">重点路段</div> <div class="code-name">&amp;#xe69f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe66c;</span> <div class="name">user</div> <div class="code-name">&amp;#xe66c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe619;</span> <div class="name">缺失</div> <div class="code-name">&amp;#xe619;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe618;</span> <div class="name">请假</div> <div class="code-name">&amp;#xe618;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe613;</span> <div class="name">出差</div> <div class="code-name">&amp;#xe613;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe660;</span> <div class="name">修改密码</div> <div class="code-name">&amp;#xe660;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe747;</span> <div class="name">清除</div> <div class="code-name">&amp;#xe747;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63f;</span> <div class="name">模型管理</div> <div class="code-name">&amp;#xe63f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62b;</span> <div class="name">修改</div> <div class="code-name">&amp;#xe62b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe674;</span> <div class="name">不通过</div> <div class="code-name">&amp;#xe674;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe614;</span> <div class="name">部门</div> <div class="code-name">&amp;#xe614;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe626;</span> <div class="name">字典</div> <div class="code-name">&amp;#xe626;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61c;</span> <div class="name">通知</div> <div class="code-name">&amp;#xe61c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe658;</span> <div class="name">节假日</div> <div class="code-name">&amp;#xe658;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe628;</span> <div class="name">热力图</div> <div class="code-name">&amp;#xe628;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe686;</span> <div class="name">通过</div> <div class="code-name">&amp;#xe686;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe632;</span> <div class="name">参数</div> <div class="code-name">&amp;#xe632;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe605;</span> <div class="name">首页-首页</div> <div class="code-name">&amp;#xe605;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe615;</span> <div class="name">设备</div> <div class="code-name">&amp;#xe615;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe645;</span> <div class="name">注销</div> <div class="code-name">&amp;#xe645;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe745;</span> <div class="name">Excel文件</div> <div class="code-name">&amp;#xe745;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6d5;</span> <div class="name">密码</div> <div class="code-name">&amp;#xe6d5;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6a9;</span> <div class="name">地点</div> <div class="code-name">&amp;#xe6a9;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe665;</span> <div class="name">提醒</div> <div class="code-name">&amp;#xe665;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe652;</span> <div class="name">刷新</div> <div class="code-name">&amp;#xe652;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe637;</span> <div class="name">确认方案</div> <div class="code-name">&amp;#xe637;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe606;</span> <div class="name">链接</div> <div class="code-name">&amp;#xe606;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe7d9;</span> <div class="name">用户组</div> <div class="code-name">&amp;#xe7d9;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe648;</span> <div class="name">区域</div> <div class="code-name">&amp;#xe648;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe608;</span> <div class="name">签到</div> <div class="code-name">&amp;#xe608;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61f;</span> <div class="name">位置</div> <div class="code-name">&amp;#xe61f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61d;</span> <div class="name">详情</div> <div class="code-name">&amp;#xe61d;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63b;</span> <div class="name">统计</div> <div class="code-name">&amp;#xe63b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe616;</span> <div class="name">分组</div> <div class="code-name">&amp;#xe616;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe617;</span> <div class="name">排班管理</div> <div class="code-name">&amp;#xe617;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe61a;</span> <div class="name">日历</div> <div class="code-name">&amp;#xe61a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63d;</span> <div class="name">设备</div> <div class="code-name">&amp;#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe636;</span> <div class="name">离线</div> <div class="code-name">&amp;#xe636;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe7d2;</span> <div class="name">有车一族</div> <div class="code-name">&amp;#xe7d2;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe629;</span> <div class="name">导出</div> <div class="code-name">&amp;#xe629;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe630;</span> <div class="name">警察</div> <div class="code-name">&amp;#xe630;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe7b2;</span> <div class="name">icon 离开项目</div> <div class="code-name">&amp;#xe7b2;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe620;</span> <div class="name">模块</div> <div class="code-name">&amp;#xe620;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe671;</span> <div class="name">公路</div> <div class="code-name">&amp;#xe671;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe8ef;</span> <div class="name">308上一页、后退、返回</div> <div class="code-name">&amp;#xe8ef;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe8f1;</span> <div class="name">309下一页、前进、查看更多</div> <div class="code-name">&amp;#xe8f1;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60b;</span> <div class="name">消息</div> <div class="code-name">&amp;#xe60b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe607;</span> <div class="name">考勤</div> <div class="code-name">&amp;#xe607;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe690;</span> <div class="name">复制</div> <div class="code-name">&amp;#xe690;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe622;</span> <div class="name">导入 (3)</div> <div class="code-name">&amp;#xe622;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe633;</span> <div class="name">值班安排</div> <div class="code-name">&amp;#xe633;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe621;</span> <div class="name">清除</div> <div class="code-name">&amp;#xe621;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe680;</span> <div class="name">车</div> <div class="code-name">&amp;#xe680;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe719;</span> <div class="name">缺勤</div> <div class="code-name">&amp;#xe719;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6b5;</span> <div class="name">预案管理</div> <div class="code-name">&amp;#xe6b5;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe609;</span> <div class="name">公告</div> <div class="code-name">&amp;#xe609;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe601;</span> <div class="name">查询</div> <div class="code-name">&amp;#xe601;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6d4;</span> <div class="name">排班考勤</div> <div class="code-name">&amp;#xe6d4;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6b3;</span> <div class="name">操作</div> <div class="code-name">&amp;#xe6b3;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe625;</span> <div class="name">视频</div> <div class="code-name">&amp;#xe625;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe655;</span> <div class="name">更多</div> <div class="code-name">&amp;#xe655;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe623;</span> <div class="name">组队</div> <div class="code-name">&amp;#xe623;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6d6;</span> <div class="name">重新加载</div> <div class="code-name">&amp;#xe6d6;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62a;</span> <div class="name">登录</div> <div class="code-name">&amp;#xe62a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe646;</span> <div class="name">粘贴</div> <div class="code-name">&amp;#xe646;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe768;</span> <div class="name">切换</div> <div class="code-name">&amp;#xe768;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe602;</span> <div class="name">交通</div> <div class="code-name">&amp;#xe602;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe92f;</span> <div class="name">用户</div> <div class="code-name">&amp;#xe92f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe603;</span> <div class="name">删 除</div> <div class="code-name">&amp;#xe603;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6c7;</span> <div class="name">车辆</div> <div class="code-name">&amp;#xe6c7;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe624;</span> <div class="name">框选</div> <div class="code-name">&amp;#xe624;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe604;</span> <div class="name">角色管理</div> <div class="code-name">&amp;#xe604;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe685;</span> <div class="name">系统设置</div> <div class="code-name">&amp;#xe685;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe9b0;</span> <div class="name">迟到</div> <div class="code-name">&amp;#xe9b0;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe653;</span> <div class="name">外出</div> <div class="code-name">&amp;#xe653;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe649;</span> <div class="name">公告变更</div> <div class="code-name">&amp;#xe649;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe627;</span> <div class="name">休假管理</div> <div class="code-name">&amp;#xe627;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62c;</span> <div class="name">早退检测</div> <div class="code-name">&amp;#xe62c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6b4;</span> <div class="name">审批</div> <div class="code-name">&amp;#xe6b4;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62e;</span> <div class="name">权限</div> <div class="code-name">&amp;#xe62e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe65e;</span> <div class="name">全屏</div> <div class="code-name">&amp;#xe65e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe647;</span> <div class="name">设置</div> <div class="code-name">&amp;#xe647;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60a;</span> <div class="name">班次管理</div> <div class="code-name">&amp;#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62f;</span> <div class="name">人员班次管理</div> <div class="code-name">&amp;#xe62f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe631;</span> <div class="name">人员排班</div> <div class="code-name">&amp;#xe631;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe642;</span> <div class="name">任务调度</div> <div class="code-name">&amp;#xe642;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe634;</span> <div class="name">异常</div> <div class="code-name">&amp;#xe634;</div> </li> <li class="dib"> <span class="icon iconfont">&#xea40;</span> <div class="name">基础数据</div> <div class="code-name">&amp;#xea40;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe666;</span> <div class="name">迟到</div> <div class="code-name">&amp;#xe666;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe668;</span> <div class="name">早退</div> <div class="code-name">&amp;#xe668;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe66a;</span> <div class="name">旷工</div> <div class="code-name">&amp;#xe66a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xea41;</span> <div class="name">地图</div> <div class="code-name">&amp;#xea41;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe639;</span> <div class="name">排班</div> <div class="code-name">&amp;#xe639;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6d7;</span> <div class="name">辅助决策</div> <div class="code-name">&amp;#xe6d7;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe65c;</span> <div class="name">时间</div> <div class="code-name">&amp;#xe65c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe638;</span> <div class="name">城市治理</div> <div class="code-name">&amp;#xe638;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe643;</span> <div class="name">已处理告警</div> <div class="code-name">&amp;#xe643;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64a;</span> <div class="name">日志</div> <div class="code-name">&amp;#xe64a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe635;</span> <div class="name">假</div> <div class="code-name">&amp;#xe635;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe65b;</span> <div class="name">管理人员</div> <div class="code-name">&amp;#xe65b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xec1e;</span> <div class="name">点</div> <div class="code-name">&amp;#xec1e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6a3;</span> <div class="name">实时视频监控</div> <div class="code-name">&amp;#xe6a3;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64b;</span> <div class="name">检查通报</div> <div class="code-name">&amp;#xe64b;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64c;</span> <div class="name">隐患-线</div> <div class="code-name">&amp;#xe64c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64d;</span> <div class="name">预警</div> <div class="code-name">&amp;#xe64d;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63a;</span> <div class="name">查询业务</div> <div class="code-name">&amp;#xe63a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64e;</span> <div class="name">Icon - 待处理</div> <div class="code-name">&amp;#xe64e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe64f;</span> <div class="name">中心化</div> <div class="code-name">&amp;#xe64f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe65d;</span> <div class="name">考核</div> <div class="code-name">&amp;#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe650;</span> <div class="name">数据,可视化</div> <div class="code-name">&amp;#xe650;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe70c;</span> <div class="name">隐患易发点</div> <div class="code-name">&amp;#xe70c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe651;</span> <div class="name">知识库</div> <div class="code-name">&amp;#xe651;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe659;</span> <div class="name">考核设置</div> <div class="code-name">&amp;#xe659;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe654;</span> <div class="name">邀请机构管理</div> <div class="code-name">&amp;#xe654;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63c;</span> <div class="name">icon_road</div> <div class="code-name">&amp;#xe63c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe640;</span> <div class="name">全屏</div> <div class="code-name">&amp;#xe640;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe641;</span> <div class="name">退出全屏</div> <div class="code-name">&amp;#xe641;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe644;</span> <div class="name">区域管理</div> <div class="code-name">&amp;#xe644;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe718;</span> <div class="name">菜单</div> <div class="code-name">&amp;#xe718;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe6ed;</span> <div class="name">road-map-line</div> <div class="code-name">&amp;#xe6ed;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe790;</span> <div class="name">road-map-line</div> <div class="code-name">&amp;#xe790;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe68a;</span> <div class="name">地图新增</div> <div class="code-name">&amp;#xe68a;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe656;</span> <div class="name">模型</div> <div class="code-name">&amp;#xe656;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe709;</span> <div class="name">分析</div> <div class="code-name">&amp;#xe709;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe670;</span> <div class="name">流程</div> <div class="code-name">&amp;#xe670;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe687;</span> <div class="name">用户申诉</div> <div class="code-name">&amp;#xe687;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe63e;</span> <div class="name">待处理合同</div> <div class="code-name">&amp;#xe63e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60c;</span> <div class="name">违法</div> <div class="code-name">&amp;#xe60c;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60d;</span> <div class="name">考试</div> <div class="code-name">&amp;#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60e;</span> <div class="name">车辆</div> <div class="code-name">&amp;#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe60f;</span> <div class="name">事故</div> <div class="code-name">&amp;#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe610;</span> <div class="name">检验</div> <div class="code-name">&amp;#xe610;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe611;</span> <div class="name">查验</div> <div class="code-name">&amp;#xe611;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe612;</span> <div class="name">驾证</div> <div class="code-name">&amp;#xe612;</div> </li> <li class="dib"> <span class="icon iconfont">&#xe62d;</span> <div class="name">换肤</div> <div class="code-name">&amp;#xe62d;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> <ul> <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> <li>支持按字体的方式去动态调整图标大小,颜色等等。</li> <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> </ul> <blockquote> <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> </blockquote> <p>Unicode 使用步骤如下:</p> <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> <pre><code class="language-css" >@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } </code></pre> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> <pre> <code class="language-html" >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt; </code></pre> <blockquote> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content font-class"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont ico-xinzengyuan"></span> <div class="name"> 新增 圆 </div> <div class="code-name">.ico-xinzengyuan </div> </li> <li class="dib"> <span class="icon iconfont ico-tupian"></span> <div class="name"> 图片 </div> <div class="code-name">.ico-tupian </div> </li> <li class="dib"> <span class="icon iconfont ico-tuceng"></span> <div class="name"> 图层 </div> <div class="code-name">.ico-tuceng </div> </li> <li class="dib"> <span class="icon iconfont ico-tiaozhuan"></span> <div class="name"> 跳转 </div> <div class="code-name">.ico-tiaozhuan </div> </li> <li class="dib"> <span class="icon iconfont ico-clock"></span> <div class="name"> clock </div> <div class="code-name">.ico-clock </div> </li> <li class="dib"> <span class="icon iconfont ico-zhongdianluduan"></span> <div class="name"> 重点路段 </div> <div class="code-name">.ico-zhongdianluduan </div> </li> <li class="dib"> <span class="icon iconfont ico-user"></span> <div class="name"> user </div> <div class="code-name">.ico-user </div> </li> <li class="dib"> <span class="icon iconfont ico-queka"></span> <div class="name"> 缺失 </div> <div class="code-name">.ico-queka </div> </li> <li class="dib"> <span class="icon iconfont ico-qingjia"></span> <div class="name"> 请假 </div> <div class="code-name">.ico-qingjia </div> </li> <li class="dib"> <span class="icon iconfont ico-chuchai"></span> <div class="name"> 出差 </div> <div class="code-name">.ico-chuchai </div> </li> <li class="dib"> <span class="icon iconfont ico-mima"></span> <div class="name"> 修改密码 </div> <div class="code-name">.ico-mima </div> </li> <li class="dib"> <span class="icon iconfont ico-qingchu"></span> <div class="name"> 清除 </div> <div class="code-name">.ico-qingchu </div> </li> <li class="dib"> <span class="icon iconfont ico-weibiaoti13"></span> <div class="name"> 模型管理 </div> <div class="code-name">.ico-weibiaoti13 </div> </li> <li class="dib"> <span class="icon iconfont ico-xiugai"></span> <div class="name"> 修改 </div> <div class="code-name">.ico-xiugai </div> </li> <li class="dib"> <span class="icon iconfont ico-butongguo"></span> <div class="name"> 不通过 </div> <div class="code-name">.ico-butongguo </div> </li> <li class="dib"> <span class="icon iconfont ico-bumen"></span> <div class="name"> 部门 </div> <div class="code-name">.ico-bumen </div> </li> <li class="dib"> <span class="icon iconfont ico-zidian"></span> <div class="name"> 字典 </div> <div class="code-name">.ico-zidian </div> </li> <li class="dib"> <span class="icon iconfont ico-tongzhi"></span> <div class="name"> 通知 </div> <div class="code-name">.ico-tongzhi </div> </li> <li class="dib"> <span class="icon iconfont ico-holiday"></span> <div class="name"> 节假日 </div> <div class="code-name">.ico-holiday </div> </li> <li class="dib"> <span class="icon iconfont ico-relitu"></span> <div class="name"> 热力图 </div> <div class="code-name">.ico-relitu </div> </li> <li class="dib"> <span class="icon iconfont ico-tongguo"></span> <div class="name"> 通过 </div> <div class="code-name">.ico-tongguo </div> </li> <li class="dib"> <span class="icon iconfont ico-canshu"></span> <div class="name"> 参数 </div> <div class="code-name">.ico-canshu </div> </li> <li class="dib"> <span class="icon iconfont ico-shouye"></span> <div class="name"> 首页-首页 </div> <div class="code-name">.ico-shouye </div> </li> <li class="dib"> <span class="icon iconfont ico-shebei25"></span> <div class="name"> 设备 </div> <div class="code-name">.ico-shebei25 </div> </li> <li class="dib"> <span class="icon iconfont ico-zhuxiao"></span> <div class="name"> 注销 </div> <div class="code-name">.ico-zhuxiao </div> </li> <li class="dib"> <span class="icon iconfont ico-excelwenjian"></span> <div class="name"> Excel文件 </div> <div class="code-name">.ico-excelwenjian </div> </li> <li class="dib"> <span class="icon iconfont ico-lock"></span> <div class="name"> 密码 </div> <div class="code-name">.ico-lock </div> </li> <li class="dib"> <span class="icon iconfont ico-didian"></span> <div class="name"> 地点 </div> <div class="code-name">.ico-didian </div> </li> <li class="dib"> <span class="icon iconfont ico-tixing"></span> <div class="name"> 提醒 </div> <div class="code-name">.ico-tixing </div> </li> <li class="dib"> <span class="icon iconfont ico-shuaxin"></span> <div class="name"> 刷新 </div> <div class="code-name">.ico-shuaxin </div> </li> <li class="dib"> <span class="icon iconfont ico-querenfangan"></span> <div class="name"> 确认方案 </div> <div class="code-name">.ico-querenfangan </div> </li> <li class="dib"> <span class="icon iconfont ico-link"></span> <div class="name"> 链接 </div> <div class="code-name">.ico-link </div> </li> <li class="dib"> <span class="icon iconfont ico-yonghuzu"></span> <div class="name"> 用户组 </div> <div class="code-name">.ico-yonghuzu </div> </li> <li class="dib"> <span class="icon iconfont ico-quyu"></span> <div class="name"> 区域 </div> <div class="code-name">.ico-quyu </div> </li> <li class="dib"> <span class="icon iconfont ico-qiandao"></span> <div class="name"> 签到 </div> <div class="code-name">.ico-qiandao </div> </li> <li class="dib"> <span class="icon iconfont ico-weizhi"></span> <div class="name"> 位置 </div> <div class="code-name">.ico-weizhi </div> </li> <li class="dib"> <span class="icon iconfont ico-xiangqing"></span> <div class="name"> 详情 </div> <div class="code-name">.ico-xiangqing </div> </li> <li class="dib"> <span class="icon iconfont ico-tongji"></span> <div class="name"> 统计 </div> <div class="code-name">.ico-tongji </div> </li> <li class="dib"> <span class="icon iconfont ico-Grouping"></span> <div class="name"> 分组 </div> <div class="code-name">.ico-Grouping </div> </li> <li class="dib"> <span class="icon iconfont ico-paibanguanli"></span> <div class="name"> 排班管理 </div> <div class="code-name">.ico-paibanguanli </div> </li> <li class="dib"> <span class="icon iconfont ico-rili"></span> <div class="name"> 日历 </div> <div class="code-name">.ico-rili </div> </li> <li class="dib"> <span class="icon iconfont ico-shebei"></span> <div class="name"> 设备 </div> <div class="code-name">.ico-shebei </div> </li> <li class="dib"> <span class="icon iconfont ico-lixian"></span> <div class="name"> 离线 </div> <div class="code-name">.ico-lixian </div> </li> <li class="dib"> <span class="icon iconfont ico-youche"></span> <div class="name"> 有车一族 </div> <div class="code-name">.ico-youche </div> </li> <li class="dib"> <span class="icon iconfont ico-daochu"></span> <div class="name"> 导出 </div> <div class="code-name">.ico-daochu </div> </li> <li class="dib"> <span class="icon iconfont ico-jingcha"></span> <div class="name"> 警察 </div> <div class="code-name">.ico-jingcha </div> </li> <li class="dib"> <span class="icon iconfont ico-likai"></span> <div class="name"> icon 离开项目 </div> <div class="code-name">.ico-likai </div> </li> <li class="dib"> <span class="icon iconfont ico-mokuai"></span> <div class="name"> 模块 </div> <div class="code-name">.ico-mokuai </div> </li> <li class="dib"> <span class="icon iconfont ico-gonglu"></span> <div class="name"> 公路 </div> <div class="code-name">.ico-gonglu </div> </li> <li class="dib"> <span class="icon iconfont ico-left-angle"></span> <div class="name"> 308上一页、后退、返回 </div> <div class="code-name">.ico-left-angle </div> </li> <li class="dib"> <span class="icon iconfont ico-right-angle"></span> <div class="name"> 309下一页、前进、查看更多 </div> <div class="code-name">.ico-right-angle </div> </li> <li class="dib"> <span class="icon iconfont ico-ai-message"></span> <div class="name"> 消息 </div> <div class="code-name">.ico-ai-message </div> </li> <li class="dib"> <span class="icon iconfont ico-kaoqin"></span> <div class="name"> 考勤 </div> <div class="code-name">.ico-kaoqin </div> </li> <li class="dib"> <span class="icon iconfont ico-fuzhi"></span> <div class="name"> 复制 </div> <div class="code-name">.ico-fuzhi </div> </li> <li class="dib"> <span class="icon iconfont ico-daoru"></span> <div class="name"> 导入 (3) </div> <div class="code-name">.ico-daoru </div> </li> <li class="dib"> <span class="icon iconfont ico-zhibananpai"></span> <div class="name"> 值班安排 </div> <div class="code-name">.ico-zhibananpai </div> </li> <li class="dib"> <span class="icon iconfont ico-qingchu1"></span> <div class="name"> 清除 </div> <div class="code-name">.ico-qingchu1 </div> </li> <li class="dib"> <span class="icon iconfont ico-che"></span> <div class="name"> 车 </div> <div class="code-name">.ico-che </div> </li> <li class="dib"> <span class="icon iconfont ico-queqin"></span> <div class="name"> 缺勤 </div> <div class="code-name">.ico-queqin </div> </li> <li class="dib"> <span class="icon iconfont ico-yuanguanli"></span> <div class="name"> 预案管理 </div> <div class="code-name">.ico-yuanguanli </div> </li> <li class="dib"> <span class="icon iconfont ico-gonggao"></span> <div class="name"> 公告 </div> <div class="code-name">.ico-gonggao </div> </li> <li class="dib"> <span class="icon iconfont ico-chaxun"></span> <div class="name"> 查询 </div> <div class="code-name">.ico-chaxun </div> </li> <li class="dib"> <span class="icon iconfont ico-paibankaoqin"></span> <div class="name"> 排班考勤 </div> <div class="code-name">.ico-paibankaoqin </div> </li> <li class="dib"> <span class="icon iconfont ico-caozuo"></span> <div class="name"> 操作 </div> <div class="code-name">.ico-caozuo </div> </li> <li class="dib"> <span class="icon iconfont ico-shipin"></span> <div class="name"> 视频 </div> <div class="code-name">.ico-shipin </div