peng.peng
1 year ago
26 changed files with 4027 additions and 0 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,370 @@ |
|||
*{margin: 0;padding: 0;list-style: none;} |
|||
/* |
|||
KISSY CSS Reset |
|||
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 |
|||
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 |
|||
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 |
|||
特色:1. 适应中文;2. 基于最新主流浏览器。 |
|||
维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> |
|||
*/ |
|||
|
|||
/** 清除内外边距 **/ |
|||
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ |
|||
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ |
|||
pre, /* text formatting elements 文本格式元素 */ |
|||
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ |
|||
th, td /* table elements 表格元素 */ { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** 设置默认字体 **/ |
|||
body, |
|||
button, input, select, textarea /* for ie */ { |
|||
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { font-size: 100%; } |
|||
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ |
|||
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ |
|||
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ |
|||
|
|||
/** 重置列表元素 **/ |
|||
ul, ol { list-style: none; } |
|||
|
|||
/** 重置文本格式元素 **/ |
|||
a { text-decoration: none; } |
|||
a:hover { text-decoration: underline; } |
|||
|
|||
|
|||
/** 重置表单元素 **/ |
|||
legend { color: #000; } /* for ie6 */ |
|||
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ |
|||
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ |
|||
/* 注:optgroup 无法扶正 */ |
|||
|
|||
/** 重置表格元素 **/ |
|||
table { border-collapse: collapse; border-spacing: 0; } |
|||
|
|||
/* 清除浮动 */ |
|||
.ks-clear:after, .clear:after { |
|||
content: '\20'; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
} |
|||
.ks-clear, .clear { |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 100px; |
|||
width: 960px; |
|||
margin: 0 auto; |
|||
} |
|||
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} |
|||
|
|||
.helps{margin-top:40px;} |
|||
.helps pre{ |
|||
padding:20px; |
|||
margin:10px 0; |
|||
border:solid 1px #e7e1cd; |
|||
background-color: #fffdef; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.icon_lists{ |
|||
width: 100% !important; |
|||
|
|||
} |
|||
|
|||
.icon_lists li{ |
|||
float:left; |
|||
width: 100px; |
|||
height:180px; |
|||
text-align: center; |
|||
list-style: none !important; |
|||
} |
|||
.icon_lists .icon{ |
|||
font-size: 42px; |
|||
line-height: 100px; |
|||
margin: 10px 0; |
|||
color:#333; |
|||
-webkit-transition: font-size 0.25s ease-out 0s; |
|||
-moz-transition: font-size 0.25s ease-out 0s; |
|||
transition: font-size 0.25s ease-out 0s; |
|||
|
|||
} |
|||
.icon_lists .icon:hover{ |
|||
font-size: 100px; |
|||
} |
|||
|
|||
|
|||
|
|||
.markdown { |
|||
color: #666; |
|||
font-size: 14px; |
|||
line-height: 1.8; |
|||
} |
|||
|
|||
.highlight { |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.markdown img { |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
color: #404040; |
|||
font-weight: 500; |
|||
line-height: 40px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown h2, |
|||
.markdown h3, |
|||
.markdown h4, |
|||
.markdown h5, |
|||
.markdown h6 { |
|||
color: #404040; |
|||
margin: 1.6em 0 0.6em 0; |
|||
font-weight: 500; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.markdown h2 { |
|||
font-size: 22px; |
|||
} |
|||
|
|||
.markdown h3 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.markdown h4 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.markdown h5 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown h6 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown hr { |
|||
height: 1px; |
|||
border: 0; |
|||
background: #e9e9e9; |
|||
margin: 16px 0; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown p, |
|||
.markdown pre { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
.markdown > p, |
|||
.markdown > blockquote, |
|||
.markdown > .highlight, |
|||
.markdown > ol, |
|||
.markdown > ul { |
|||
width: 80%; |
|||
} |
|||
|
|||
.markdown ul > li { |
|||
list-style: circle; |
|||
} |
|||
|
|||
.markdown > ul li, |
|||
.markdown blockquote ul > li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown > ul li p, |
|||
.markdown > ol li p { |
|||
margin: 0.6em 0; |
|||
} |
|||
|
|||
.markdown ol > li { |
|||
list-style: decimal; |
|||
} |
|||
|
|||
.markdown > ol li, |
|||
.markdown blockquote ol > li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown code { |
|||
margin: 0 3px; |
|||
padding: 0 5px; |
|||
background: #eee; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.markdown pre { |
|||
border-radius: 6px; |
|||
background: #f7f7f7; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.markdown pre code { |
|||
border: none; |
|||
background: #f7f7f7; |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown strong, |
|||
.markdown b { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown > table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0px; |
|||
empty-cells: show; |
|||
border: 1px solid #e9e9e9; |
|||
width: 95%; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown > table th { |
|||
white-space: nowrap; |
|||
color: #333; |
|||
font-weight: 600; |
|||
|
|||
} |
|||
|
|||
.markdown > table th, |
|||
.markdown > table td { |
|||
border: 1px solid #e9e9e9; |
|||
padding: 8px 16px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.markdown > table th { |
|||
background: #F7F7F7; |
|||
} |
|||
|
|||
.markdown blockquote { |
|||
font-size: 90%; |
|||
color: #999; |
|||
border-left: 4px solid #e9e9e9; |
|||
padding-left: 0.8em; |
|||
margin: 1em 0; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.markdown blockquote p { |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown .anchor { |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.markdown .waiting { |
|||
color: #ccc; |
|||
} |
|||
|
|||
.markdown h1:hover .anchor, |
|||
.markdown h2:hover .anchor, |
|||
.markdown h3:hover .anchor, |
|||
.markdown h4:hover .anchor, |
|||
.markdown h5:hover .anchor, |
|||
.markdown h6:hover .anchor { |
|||
opacity: 1; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.markdown > br, |
|||
.markdown > p > br { |
|||
clear: both; |
|||
} |
|||
|
|||
|
|||
.hljs { |
|||
display: block; |
|||
background: white; |
|||
padding: 0.5em; |
|||
color: #333333; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.hljs-comment, |
|||
.hljs-meta { |
|||
color: #969896; |
|||
} |
|||
|
|||
.hljs-string, |
|||
.hljs-variable, |
|||
.hljs-template-variable, |
|||
.hljs-strong, |
|||
.hljs-emphasis, |
|||
.hljs-quote { |
|||
color: #df5000; |
|||
} |
|||
|
|||
.hljs-keyword, |
|||
.hljs-selector-tag, |
|||
.hljs-type { |
|||
color: #a71d5d; |
|||
} |
|||
|
|||
.hljs-literal, |
|||
.hljs-symbol, |
|||
.hljs-bullet, |
|||
.hljs-attribute { |
|||
color: #0086b3; |
|||
} |
|||
|
|||
.hljs-section, |
|||
.hljs-name { |
|||
color: #63a35c; |
|||
} |
|||
|
|||
.hljs-tag { |
|||
color: #333333; |
|||
} |
|||
|
|||
.hljs-title, |
|||
.hljs-attr, |
|||
.hljs-selector-id, |
|||
.hljs-selector-class, |
|||
.hljs-selector-attr, |
|||
.hljs-selector-pseudo { |
|||
color: #795da3; |
|||
} |
|||
|
|||
.hljs-addition { |
|||
color: #55a532; |
|||
background-color: #eaffea; |
|||
} |
|||
|
|||
.hljs-deletion { |
|||
color: #bd2c00; |
|||
background-color: #ffecec; |
|||
} |
|||
|
|||
.hljs-link { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
pre{ |
|||
background: #fff; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
@ -0,0 +1,514 @@ |
|||
|
|||
<!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 sc icon-liuliang"></i> |
|||
<div class="name">流量</div> |
|||
<div class="fontclass">.icon-liuliang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-iconfontditie"></i> |
|||
<div class="name">轻轨</div> |
|||
<div class="fontclass">.icon-iconfontditie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-fengsu3"></i> |
|||
<div class="name">风速3</div> |
|||
<div class="fontclass">.icon-fengsu3</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-calendar"></i> |
|||
<div class="name">calendar</div> |
|||
<div class="fontclass">.icon-calendar</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-box"></i> |
|||
<div class="name">box</div> |
|||
<div class="fontclass">.icon-box</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenheshibai"></i> |
|||
<div class="name">审核失败</div> |
|||
<div class="fontclass">.icon-shenheshibai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-slope"></i> |
|||
<div class="name">边坡</div> |
|||
<div class="fontclass">.icon-slope</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-icon2"></i> |
|||
<div class="name">公路</div> |
|||
<div class="fontclass">.icon-icon2</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-gnsscaidian"></i> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="fontclass">.icon-gnsscaidian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuanganqishebei"></i> |
|||
<div class="name">传感器设备</div> |
|||
<div class="fontclass">.icon-chuanganqishebei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dianliuchuanganqi"></i> |
|||
<div class="name">电流传感器</div> |
|||
<div class="fontclass">.icon-dianliuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dianyachuanganqi"></i> |
|||
<div class="name">电压传感器</div> |
|||
<div class="fontclass">.icon-dianyachuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wenduchuanganqi"></i> |
|||
<div class="name">温度传感器</div> |
|||
<div class="fontclass">.icon-wenduchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xinjian"></i> |
|||
<div class="name">新建</div> |
|||
<div class="fontclass">.icon-xinjian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-handong"></i> |
|||
<div class="name">涵洞</div> |
|||
<div class="fontclass">.icon-handong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-guanwanggongcheng"></i> |
|||
<div class="name">管网工程</div> |
|||
<div class="fontclass">.icon-guanwanggongcheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenhe"></i> |
|||
<div class="name">审核</div> |
|||
<div class="fontclass">.icon-shenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-zhihuishequ"></i> |
|||
<div class="name">智慧城市</div> |
|||
<div class="fontclass">.icon-zhihuishequ</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-bianpoweiyi"></i> |
|||
<div class="name">边坡位移</div> |
|||
<div class="fontclass">.icon-bianpoweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jianzhu"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">.icon-jianzhu</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuguan"></i> |
|||
<div class="name">储罐</div> |
|||
<div class="fontclass">.icon-chuguan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-suidao"></i> |
|||
<div class="name">隧道</div> |
|||
<div class="fontclass">.icon-suidao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-data"></i> |
|||
<div class="name">data</div> |
|||
<div class="fontclass">.icon-data</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-kuangshankaicai"></i> |
|||
<div class="name">矿山开采</div> |
|||
<div class="fontclass">.icon-kuangshankaicai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wangluo"></i> |
|||
<div class="name">网络</div> |
|||
<div class="fontclass">.icon-wangluo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jiankong"></i> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">.icon-jiankong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dashuju"></i> |
|||
<div class="name">大数据</div> |
|||
<div class="fontclass">.icon-dashuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shuju"></i> |
|||
<div class="name">数据库</div> |
|||
<div class="fontclass">.icon-shuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenhechenggong"></i> |
|||
<div class="name">审核成功</div> |
|||
<div class="fontclass">.icon-shenhechenggong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jiankong1"></i> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">.icon-jiankong1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wangluoxitong"></i> |
|||
<div class="name">网络系统</div> |
|||
<div class="fontclass">.icon-wangluoxitong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dingwei"></i> |
|||
<div class="name">定位</div> |
|||
<div class="fontclass">.icon-dingwei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xitongyunzhuanqingkuang"></i> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="fontclass">.icon-xitongyunzhuanqingkuang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chakan"></i> |
|||
<div class="name">查看</div> |
|||
<div class="fontclass">.icon-chakan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-lianjie"></i> |
|||
<div class="name">链接</div> |
|||
<div class="fontclass">.icon-lianjie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shujudaochu-01"></i> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="fontclass">.icon-shujudaochu-01</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xitongzhuangtai"></i> |
|||
<div class="name">系统状态</div> |
|||
<div class="fontclass">.icon-xitongzhuangtai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xiaofeimingxidan"></i> |
|||
<div class="name">消费明细单</div> |
|||
<div class="fontclass">.icon-xiaofeimingxidan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-SQLshenhe"></i> |
|||
<div class="name">SQL审核</div> |
|||
<div class="fontclass">.icon-SQLshenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-aislogo"></i> |
|||
<div class="name">aislogo</div> |
|||
<div class="fontclass">.icon-aislogo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-qiao"></i> |
|||
<div class="name">桥</div> |
|||
<div class="fontclass">.icon-qiao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tashiqizhongji"></i> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="fontclass">.icon-tashiqizhongji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dwggeshi"></i> |
|||
<div class="name">dwg格式</div> |
|||
<div class="fontclass">.icon-dwggeshi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-luyouqi"></i> |
|||
<div class="name">路由器</div> |
|||
<div class="fontclass">.icon-luyouqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-anzhuangshigong-xianxing"></i> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="fontclass">.icon-anzhuangshigong-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shaixuanguolv"></i> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="fontclass">.icon-shaixuanguolv</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-anzhuangshigong"></i> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="fontclass">.icon-anzhuangshigong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tiaoxingtu-xianxing"></i> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="fontclass">.icon-tiaoxingtu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-zhexiantu-xianxing"></i> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="fontclass">.icon-zhexiantu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tieta"></i> |
|||
<div class="name">铁塔</div> |
|||
<div class="fontclass">.icon-tieta</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangtxt"></i> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="fontclass">.icon-geshi_wendangtxt</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangdoc"></i> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="fontclass">.icon-geshi_wendangdoc</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangpdf"></i> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="fontclass">.icon-geshi_wendangpdf</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangxls"></i> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="fontclass">.icon-geshi_wendangxls</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tongyongwendang"></i> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="fontclass">.icon-geshi_tongyongwendang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_shipinmp"></i> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="fontclass">.icon-geshi_shipinmp</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tupianjpg"></i> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="fontclass">.icon-geshi_tupianjpg</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tupianpng"></i> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="fontclass">.icon-geshi_tupianpng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-guangzhaochuanganqi"></i> |
|||
<div class="name">光照传感器</div> |
|||
<div class="fontclass">.icon-guangzhaochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-building"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">.icon-building</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yanwuchuanganqi"></i> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="fontclass">.icon-yanwuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shizheng"></i> |
|||
<div class="name">市政</div> |
|||
<div class="fontclass">.icon-shizheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuanganqi"></i> |
|||
<div class="name">传感器</div> |
|||
<div class="fontclass">.icon-chuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-WSD"></i> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="fontclass">.icon-WSD</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yalichuanganqi"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">.icon-yalichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yinglichuanganqi"></i> |
|||
<div class="name">应力传感器</div> |
|||
<div class="fontclass">.icon-yinglichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chenjiangchuanganqi"></i> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="fontclass">.icon-chenjiangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yalichuanganqi1"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">.icon-yalichuanganqi1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-YWC"></i> |
|||
<div class="name">液位传感器</div> |
|||
<div class="fontclass">.icon-YWC</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-computer"></i> |
|||
<div class="name">computer</div> |
|||
<div class="fontclass">.icon-computer</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-empty"></i> |
|||
<div class="name">empty</div> |
|||
<div class="fontclass">.icon-empty</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-offline"></i> |
|||
<div class="name">offline</div> |
|||
<div class="fontclass">.icon-offline</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-daba"></i> |
|||
<div class="name">大坝</div> |
|||
<div class="fontclass">.icon-daba</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenbuweiyi"></i> |
|||
<div class="name">深部位移</div> |
|||
<div class="fontclass">.icon-shenbuweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-maosuochuanganqi"></i> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="fontclass">.icon-maosuochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yuliangchuanganqi"></i> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="fontclass">.icon-yuliangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-weiyiji"></i> |
|||
<div class="name">位移计</div> |
|||
<div class="fontclass">.icon-weiyiji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-qixiangzhan_"></i> |
|||
<div class="name">气象站_1</div> |
|||
<div class="fontclass">.icon-qixiangzhan_</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenjikeng"></i> |
|||
<div class="name">深基坑</div> |
|||
<div class="fontclass">.icon-shenjikeng</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">sc</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> |
|||
<blockquote> |
|||
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</body> |
|||
</html> |
@ -0,0 +1,695 @@ |
|||
|
|||
<!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-liuliang"></use> |
|||
</svg> |
|||
<div class="name">流量</div> |
|||
<div class="fontclass">#icon-liuliang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-iconfontditie"></use> |
|||
</svg> |
|||
<div class="name">轻轨</div> |
|||
<div class="fontclass">#icon-iconfontditie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-fengsu3"></use> |
|||
</svg> |
|||
<div class="name">风速3</div> |
|||
<div class="fontclass">#icon-fengsu3</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-calendar"></use> |
|||
</svg> |
|||
<div class="name">calendar</div> |
|||
<div class="fontclass">#icon-calendar</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-box"></use> |
|||
</svg> |
|||
<div class="name">box</div> |
|||
<div class="fontclass">#icon-box</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenheshibai"></use> |
|||
</svg> |
|||
<div class="name">审核失败</div> |
|||
<div class="fontclass">#icon-shenheshibai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-slope"></use> |
|||
</svg> |
|||
<div class="name">边坡</div> |
|||
<div class="fontclass">#icon-slope</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-icon2"></use> |
|||
</svg> |
|||
<div class="name">公路</div> |
|||
<div class="fontclass">#icon-icon2</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-gnsscaidian"></use> |
|||
</svg> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="fontclass">#icon-gnsscaidian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuanganqishebei"></use> |
|||
</svg> |
|||
<div class="name">传感器设备</div> |
|||
<div class="fontclass">#icon-chuanganqishebei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dianliuchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">电流传感器</div> |
|||
<div class="fontclass">#icon-dianliuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dianyachuanganqi"></use> |
|||
</svg> |
|||
<div class="name">电压传感器</div> |
|||
<div class="fontclass">#icon-dianyachuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wenduchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">温度传感器</div> |
|||
<div class="fontclass">#icon-wenduchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xinjian"></use> |
|||
</svg> |
|||
<div class="name">新建</div> |
|||
<div class="fontclass">#icon-xinjian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-handong"></use> |
|||
</svg> |
|||
<div class="name">涵洞</div> |
|||
<div class="fontclass">#icon-handong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-guanwanggongcheng"></use> |
|||
</svg> |
|||
<div class="name">管网工程</div> |
|||
<div class="fontclass">#icon-guanwanggongcheng</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-zhihuishequ"></use> |
|||
</svg> |
|||
<div class="name">智慧城市</div> |
|||
<div class="fontclass">#icon-zhihuishequ</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-bianpoweiyi"></use> |
|||
</svg> |
|||
<div class="name">边坡位移</div> |
|||
<div class="fontclass">#icon-bianpoweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jianzhu"></use> |
|||
</svg> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">#icon-jianzhu</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuguan"></use> |
|||
</svg> |
|||
<div class="name">储罐</div> |
|||
<div class="fontclass">#icon-chuguan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-suidao"></use> |
|||
</svg> |
|||
<div class="name">隧道</div> |
|||
<div class="fontclass">#icon-suidao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-data"></use> |
|||
</svg> |
|||
<div class="name">data</div> |
|||
<div class="fontclass">#icon-data</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-kuangshankaicai"></use> |
|||
</svg> |
|||
<div class="name">矿山开采</div> |
|||
<div class="fontclass">#icon-kuangshankaicai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wangluo"></use> |
|||
</svg> |
|||
<div class="name">网络</div> |
|||
<div class="fontclass">#icon-wangluo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jiankong"></use> |
|||
</svg> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">#icon-jiankong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dashuju"></use> |
|||
</svg> |
|||
<div class="name">大数据</div> |
|||
<div class="fontclass">#icon-dashuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shuju"></use> |
|||
</svg> |
|||
<div class="name">数据库</div> |
|||
<div class="fontclass">#icon-shuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenhechenggong"></use> |
|||
</svg> |
|||
<div class="name">审核成功</div> |
|||
<div class="fontclass">#icon-shenhechenggong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jiankong1"></use> |
|||
</svg> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">#icon-jiankong1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wangluoxitong"></use> |
|||
</svg> |
|||
<div class="name">网络系统</div> |
|||
<div class="fontclass">#icon-wangluoxitong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dingwei"></use> |
|||
</svg> |
|||
<div class="name">定位</div> |
|||
<div class="fontclass">#icon-dingwei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xitongyunzhuanqingkuang"></use> |
|||
</svg> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="fontclass">#icon-xitongyunzhuanqingkuang</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-lianjie"></use> |
|||
</svg> |
|||
<div class="name">链接</div> |
|||
<div class="fontclass">#icon-lianjie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shujudaochu-01"></use> |
|||
</svg> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="fontclass">#icon-shujudaochu-01</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xitongzhuangtai"></use> |
|||
</svg> |
|||
<div class="name">系统状态</div> |
|||
<div class="fontclass">#icon-xitongzhuangtai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xiaofeimingxidan"></use> |
|||
</svg> |
|||
<div class="name">消费明细单</div> |
|||
<div class="fontclass">#icon-xiaofeimingxidan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-SQLshenhe"></use> |
|||
</svg> |
|||
<div class="name">SQL审核</div> |
|||
<div class="fontclass">#icon-SQLshenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-aislogo"></use> |
|||
</svg> |
|||
<div class="name">aislogo</div> |
|||
<div class="fontclass">#icon-aislogo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-qiao"></use> |
|||
</svg> |
|||
<div class="name">桥</div> |
|||
<div class="fontclass">#icon-qiao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tashiqizhongji"></use> |
|||
</svg> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="fontclass">#icon-tashiqizhongji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dwggeshi"></use> |
|||
</svg> |
|||
<div class="name">dwg格式</div> |
|||
<div class="fontclass">#icon-dwggeshi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-luyouqi"></use> |
|||
</svg> |
|||
<div class="name">路由器</div> |
|||
<div class="fontclass">#icon-luyouqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-anzhuangshigong-xianxing"></use> |
|||
</svg> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="fontclass">#icon-anzhuangshigong-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shaixuanguolv"></use> |
|||
</svg> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="fontclass">#icon-shaixuanguolv</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-anzhuangshigong"></use> |
|||
</svg> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="fontclass">#icon-anzhuangshigong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tiaoxingtu-xianxing"></use> |
|||
</svg> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="fontclass">#icon-tiaoxingtu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-zhexiantu-xianxing"></use> |
|||
</svg> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="fontclass">#icon-zhexiantu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tieta"></use> |
|||
</svg> |
|||
<div class="name">铁塔</div> |
|||
<div class="fontclass">#icon-tieta</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangtxt"></use> |
|||
</svg> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="fontclass">#icon-geshi_wendangtxt</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangdoc"></use> |
|||
</svg> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="fontclass">#icon-geshi_wendangdoc</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangpdf"></use> |
|||
</svg> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="fontclass">#icon-geshi_wendangpdf</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangxls"></use> |
|||
</svg> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="fontclass">#icon-geshi_wendangxls</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tongyongwendang"></use> |
|||
</svg> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="fontclass">#icon-geshi_tongyongwendang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_shipinmp"></use> |
|||
</svg> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="fontclass">#icon-geshi_shipinmp</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tupianjpg"></use> |
|||
</svg> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="fontclass">#icon-geshi_tupianjpg</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tupianpng"></use> |
|||
</svg> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="fontclass">#icon-geshi_tupianpng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-guangzhaochuanganqi"></use> |
|||
</svg> |
|||
<div class="name">光照传感器</div> |
|||
<div class="fontclass">#icon-guangzhaochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-building"></use> |
|||
</svg> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">#icon-building</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yanwuchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="fontclass">#icon-yanwuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shizheng"></use> |
|||
</svg> |
|||
<div class="name">市政</div> |
|||
<div class="fontclass">#icon-shizheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuanganqi"></use> |
|||
</svg> |
|||
<div class="name">传感器</div> |
|||
<div class="fontclass">#icon-chuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-WSD"></use> |
|||
</svg> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="fontclass">#icon-WSD</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yalichuanganqi"></use> |
|||
</svg> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">#icon-yalichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yinglichuanganqi"></use> |
|||
</svg> |
|||
<div class="name">应力传感器</div> |
|||
<div class="fontclass">#icon-yinglichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chenjiangchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="fontclass">#icon-chenjiangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yalichuanganqi1"></use> |
|||
</svg> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">#icon-yalichuanganqi1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-YWC"></use> |
|||
</svg> |
|||
<div class="name">液位传感器</div> |
|||
<div class="fontclass">#icon-YWC</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-computer"></use> |
|||
</svg> |
|||
<div class="name">computer</div> |
|||
<div class="fontclass">#icon-computer</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-empty"></use> |
|||
</svg> |
|||
<div class="name">empty</div> |
|||
<div class="fontclass">#icon-empty</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-offline"></use> |
|||
</svg> |
|||
<div class="name">offline</div> |
|||
<div class="fontclass">#icon-offline</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-daba"></use> |
|||
</svg> |
|||
<div class="name">大坝</div> |
|||
<div class="fontclass">#icon-daba</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenbuweiyi"></use> |
|||
</svg> |
|||
<div class="name">深部位移</div> |
|||
<div class="fontclass">#icon-shenbuweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-maosuochuanganqi"></use> |
|||
</svg> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="fontclass">#icon-maosuochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yuliangchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="fontclass">#icon-yuliangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-weiyiji"></use> |
|||
</svg> |
|||
<div class="name">位移计</div> |
|||
<div class="fontclass">#icon-weiyiji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-qixiangzhan_"></use> |
|||
</svg> |
|||
<div class="name">气象站_1</div> |
|||
<div class="fontclass">#icon-qixiangzhan_</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenjikeng"></use> |
|||
</svg> |
|||
<div class="name">深基坑</div> |
|||
<div class="fontclass">#icon-shenjikeng</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> |
@ -0,0 +1,552 @@ |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>IconFont</title> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
|
|||
<style type="text/css"> |
|||
|
|||
@font-face {font-family: "sc"; |
|||
src: url('iconfont.eot'); /* IE9*/ |
|||
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('iconfont.woff') format('woff'), /* chrome, firefox */ |
|||
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
|||
url('iconfont.svg#sc') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.sc { |
|||
font-family:"sc" !important; |
|||
font-size:16px; |
|||
font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-stroke-width: 0.2px; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="main markdown"> |
|||
<h1>IconFont 图标</h1> |
|||
<ul class="icon_lists clear"> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">流量</div> |
|||
<div class="code">&#xe602;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">轻轨</div> |
|||
<div class="code">&#xe66f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">风速3</div> |
|||
<div class="code">&#xe635;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">calendar</div> |
|||
<div class="code">&#xe74a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">box</div> |
|||
<div class="code">&#xe6cb;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核失败</div> |
|||
<div class="code">&#xe61d;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">边坡</div> |
|||
<div class="code">&#xe676;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">公路</div> |
|||
<div class="code">&#xe607;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="code">&#xe825;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">传感器设备</div> |
|||
<div class="code">&#xe612;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">电流传感器</div> |
|||
<div class="code">&#xe62c;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">电压传感器</div> |
|||
<div class="code">&#xe62f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">温度传感器</div> |
|||
<div class="code">&#xe637;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">新建</div> |
|||
<div class="code">&#xe61f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">涵洞</div> |
|||
<div class="code">&#xe89b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">管网工程</div> |
|||
<div class="code">&#xe646;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核</div> |
|||
<div class="code">&#xe639;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">智慧城市</div> |
|||
<div class="code">&#xe600;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">边坡位移</div> |
|||
<div class="code">&#xe60a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="code">&#xe65f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">储罐</div> |
|||
<div class="code">&#xe636;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">隧道</div> |
|||
<div class="code">&#xe61e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">data</div> |
|||
<div class="code">&#xe757;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">矿山开采</div> |
|||
<div class="code">&#xe608;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">网络</div> |
|||
<div class="code">&#xe617;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">监控</div> |
|||
<div class="code">&#xe619;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">大数据</div> |
|||
<div class="code">&#xe61a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">数据库</div> |
|||
<div class="code">&#xe61b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核成功</div> |
|||
<div class="code">&#xe627;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">监控</div> |
|||
<div class="code">&#xe620;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">网络系统</div> |
|||
<div class="code">&#xe62e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">定位</div> |
|||
<div class="code">&#xe630;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="code">&#xe631;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">查看</div> |
|||
<div class="code">&#xe63e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">链接</div> |
|||
<div class="code">&#xe63f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="code">&#xe640;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">系统状态</div> |
|||
<div class="code">&#xe642;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">消费明细单</div> |
|||
<div class="code">&#xe643;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">SQL审核</div> |
|||
<div class="code">&#xe645;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">aislogo</div> |
|||
<div class="code">&#xe648;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">桥</div> |
|||
<div class="code">&#xe715;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="code">&#xe615;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">dwg格式</div> |
|||
<div class="code">&#xe82b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">路由器</div> |
|||
<div class="code">&#xe603;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="code">&#xe8d6;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="code">&#xe8d7;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="code">&#xe8d8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="code">&#xe904;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="code">&#xe906;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">铁塔</div> |
|||
<div class="code">&#xe605;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="code">&#xe6b8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="code">&#xe6b9;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="code">&#xe6bc;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="code">&#xe6be;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="code">&#xe6c0;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="code">&#xe6c8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="code">&#xe6cc;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="code">&#xe6ce;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">光照传感器</div> |
|||
<div class="code">&#xe638;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="code">&#xe61c;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="code">&#xe610;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">市政</div> |
|||
<div class="code">&#xe6ca;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">传感器</div> |
|||
<div class="code">&#xe60f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="code">&#xe697;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="code">&#xe60e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">应力传感器</div> |
|||
<div class="code">&#xe611;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="code">&#xe601;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="code">&#xe606;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">液位传感器</div> |
|||
<div class="code">&#xe699;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">computer</div> |
|||
<div class="code">&#xe6eb;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">empty</div> |
|||
<div class="code">&#xe6f7;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">offline</div> |
|||
<div class="code">&#xe712;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">大坝</div> |
|||
<div class="code">&#xe632;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">深部位移</div> |
|||
<div class="code">&#xe613;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="code">&#xe614;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="code">&#xe616;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">位移计</div> |
|||
<div class="code">&#xe618;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">气象站_1</div> |
|||
<div class="code">&#xe60d;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">深基坑</div> |
|||
<div class="code">&#xe62a;</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<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">第一步:拷贝项目下面生成的font-face</h3> |
|||
<pre><code class="lang-js hljs javascript">@font-face { |
|||
font-family: <span class="hljs-string">'sc'</span>; |
|||
src: url(<span class="hljs-string">'iconfont.eot'</span>); |
|||
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>), |
|||
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>), |
|||
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>), |
|||
url(<span class="hljs-string">'iconfont.svg#sc'</span>) format(<span class="hljs-string">'svg'</span>); |
|||
} |
|||
</code></pre> |
|||
<h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3> |
|||
<pre><code class="lang-js hljs javascript">.sc{ |
|||
font-family:<span class="hljs-string">"sc"</span> !important; |
|||
font-size:<span class="hljs-number">16</span>px;font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
</code></pre> |
|||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
|||
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"sc"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre> |
|||
|
|||
<blockquote> |
|||
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
|
|||
|
|||
</body> |
|||
</html> |
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,521 @@ |
|||
|
|||
@font-face {font-family: "anticon"; |
|||
src: url('iconfont.eot?t=1494480257283'); /* IE9*/ |
|||
src: url('iconfont.eot?t=1494480257283#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('iconfont.woff?t=1494480257283') format('woff'), /* chrome, firefox */ |
|||
url('iconfont.ttf?t=1494480257283') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
|||
url('iconfont.svg?t=1494480257283#anticon') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.anticon { |
|||
font-family:"anticon" !important; |
|||
font-size:16px; |
|||
font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-stepforward:before { content: "\e600"; } |
|||
|
|||
.icon-stepbackward:before { content: "\e601"; } |
|||
|
|||
.icon-forward:before { content: "\e602"; } |
|||
|
|||
.icon-banckward:before { content: "\e603"; } |
|||
|
|||
.icon-caretright:before { content: "\e604"; } |
|||
|
|||
.icon-caretleft:before { content: "\e605"; } |
|||
|
|||
.icon-caretdown:before { content: "\e606"; } |
|||
|
|||
.icon-caretup:before { content: "\e607"; } |
|||
|
|||
.icon-rightcircle:before { content: "\e608"; } |
|||
|
|||
.icon-leftcircle:before { content: "\e609"; } |
|||
|
|||
.icon-upcircle:before { content: "\e60a"; } |
|||
|
|||
.icon-downcircle:before { content: "\e60b"; } |
|||
|
|||
.icon-rightcircleo:before { content: "\e60c"; } |
|||
|
|||
.icon-leftcircleo:before { content: "\e60d"; } |
|||
|
|||
.icon-upcircleo:before { content: "\e60e"; } |
|||
|
|||
.icon-downcircleo:before { content: "\e60f"; } |
|||
|
|||
.icon-verticleleft:before { content: "\e610"; } |
|||
|
|||
.icon-verticleright:before { content: "\e611"; } |
|||
|
|||
.icon-rollback:before { content: "\e612"; } |
|||
|
|||
.icon-retweet:before { content: "\e613"; } |
|||
|
|||
.icon-shrink:before { content: "\e614"; } |
|||
|
|||
.icon-arrowsalt:before { content: "\e615"; } |
|||
|
|||
.icon-doubleright:before { content: "\e617"; } |
|||
|
|||
.icon-doubleleft:before { content: "\e618"; } |
|||
|
|||
.icon-arrowdown:before { content: "\e619"; } |
|||
|
|||
.icon-arrowup:before { content: "\e61a"; } |
|||
|
|||
.icon-arrowright:before { content: "\e61b"; } |
|||
|
|||
.icon-arrowleft:before { content: "\e61c"; } |
|||
|
|||
.icon-down:before { content: "\e61d"; } |
|||
|
|||
.icon-up:before { content: "\e61e"; } |
|||
|
|||
.icon-right:before { content: "\e61f"; } |
|||
|
|||
.icon-left:before { content: "\e620"; } |
|||
|
|||
.icon-minussquareo:before { content: "\e621"; } |
|||
|
|||
.icon-minuscircle:before { content: "\e622"; } |
|||
|
|||
.icon-minuscircleo:before { content: "\e623"; } |
|||
|
|||
.icon-minus:before { content: "\e624"; } |
|||
|
|||
.icon-pluscircleo:before { content: "\e625"; } |
|||
|
|||
.icon-pluscircle:before { content: "\e626"; } |
|||
|
|||
.icon-plus:before { content: "\e627"; } |
|||
|
|||
.icon-infocirlce:before { content: "\e628"; } |
|||
|
|||
.icon-infocirlceo:before { content: "\e629"; } |
|||
|
|||
.icon-info:before { content: "\e62a"; } |
|||
|
|||
.icon-exclamation:before { content: "\e62b"; } |
|||
|
|||
.icon-exclamationcircle:before { content: "\e62c"; } |
|||
|
|||
.icon-exclamationcircleo:before { content: "\e62d"; } |
|||
|
|||
.icon-closecircle:before { content: "\e62e"; } |
|||
|
|||
.icon-closecircleo:before { content: "\e62f"; } |
|||
|
|||
.icon-checkcircle:before { content: "\e630"; } |
|||
|
|||
.icon-checkcircleo:before { content: "\e631"; } |
|||
|
|||
.icon-check:before { content: "\e632"; } |
|||
|
|||
.icon-close:before { content: "\e633"; } |
|||
|
|||
.icon-customerservice:before { content: "\e634"; } |
|||
|
|||
.icon-creditcard:before { content: "\e635"; } |
|||
|
|||
.icon-codesquareo:before { content: "\e636"; } |
|||
|
|||
.icon-book:before { content: "\e637"; } |
|||
|
|||
.icon-barschart:before { content: "\e638"; } |
|||
|
|||
.icon-bars:before { content: "\e639"; } |
|||
|
|||
.icon-question:before { content: "\e63a"; } |
|||
|
|||
.icon-questioncircle:before { content: "\e63b"; } |
|||
|
|||
.icon-questioncircleo:before { content: "\e63c"; } |
|||
|
|||
.icon-pause:before { content: "\e63d"; } |
|||
|
|||
.icon-pausecircle:before { content: "\e63e"; } |
|||
|
|||
.icon-pausecircleo:before { content: "\e63f"; } |
|||
|
|||
.icon-clockcircle:before { content: "\e640"; } |
|||
|
|||
.icon-clockcircleo:before { content: "\e641"; } |
|||
|
|||
.icon-swap:before { content: "\e642"; } |
|||
|
|||
.icon-swapleft:before { content: "\e643"; } |
|||
|
|||
.icon-swapright:before { content: "\e644"; } |
|||
|
|||
.icon-plussquareo:before { content: "\e645"; } |
|||
|
|||
.icon-frown:before { content: "\e646"; } |
|||
|
|||
.icon-menufold:before { content: "\e658"; } |
|||
|
|||
.icon-mail:before { content: "\e659"; } |
|||
|
|||
.icon-link:before { content: "\e65b"; } |
|||
|
|||
.icon-areachart:before { content: "\e65c"; } |
|||
|
|||
.icon-linechart:before { content: "\e65d"; } |
|||
|
|||
.icon-home:before { content: "\e65e"; } |
|||
|
|||
.icon-laptop:before { content: "\e65f"; } |
|||
|
|||
.icon-star:before { content: "\e660"; } |
|||
|
|||
.icon-staro:before { content: "\e661"; } |
|||
|
|||
.icon-filter:before { content: "\e663"; } |
|||
|
|||
.icon-meho:before { content: "\e666"; } |
|||
|
|||
.icon-meh:before { content: "\e667"; } |
|||
|
|||
.icon-shoppingcart:before { content: "\e668"; } |
|||
|
|||
.icon-save:before { content: "\e669"; } |
|||
|
|||
.icon-user:before { content: "\e66a"; } |
|||
|
|||
.icon-videocamera:before { content: "\e66b"; } |
|||
|
|||
.icon-totop:before { content: "\e66c"; } |
|||
|
|||
.icon-team:before { content: "\e66d"; } |
|||
|
|||
.icon-sharealt:before { content: "\e671"; } |
|||
|
|||
.icon-setting:before { content: "\e672"; } |
|||
|
|||
.icon-picture:before { content: "\e674"; } |
|||
|
|||
.icon-phone:before { content: "\e675"; } |
|||
|
|||
.icon-paperclip:before { content: "\e676"; } |
|||
|
|||
.icon-notification:before { content: "\e677"; } |
|||
|
|||
.icon-menuunfold:before { content: "\e679"; } |
|||
|
|||
.icon-inbox:before { content: "\e67a"; } |
|||
|
|||
.icon-lock:before { content: "\e67b"; } |
|||
|
|||
.icon-qrcode:before { content: "\e67c"; } |
|||
|
|||
.icon-tags:before { content: "\e67d"; } |
|||
|
|||
.icon-tagso:before { content: "\e67e"; } |
|||
|
|||
.icon-cloudo:before { content: "\e67f"; } |
|||
|
|||
.icon-cloud:before { content: "\e680"; } |
|||
|
|||
.icon-cloudupload:before { content: "\e681"; } |
|||
|
|||
.icon-clouddownload:before { content: "\e682"; } |
|||
|
|||
.icon-clouddownloado:before { content: "\e683"; } |
|||
|
|||
.icon-clouduploado:before { content: "\e684"; } |
|||
|
|||
.icon-enviroment:before { content: "\e685"; } |
|||
|
|||
.icon-enviromento:before { content: "\e686"; } |
|||
|
|||
.icon-eye:before { content: "\e687"; } |
|||
|
|||
.icon-eyeo:before { content: "\e688"; } |
|||
|
|||
.icon-camera:before { content: "\e689"; } |
|||
|
|||
.icon-camerao:before { content: "\e68a"; } |
|||
|
|||
.icon-windows:before { content: "\e68b"; } |
|||
|
|||
.icon-export2:before { content: "\e690"; } |
|||
|
|||
.icon-export:before { content: "\e691"; } |
|||
|
|||
.icon-circledowno:before { content: "\e693"; } |
|||
|
|||
.icon-circledown:before { content: "\e694"; } |
|||
|
|||
.icon-hdd:before { content: "\e69a"; } |
|||
|
|||
.icon-ie:before { content: "\e69b"; } |
|||
|
|||
.icon-delete:before { content: "\e69f"; } |
|||
|
|||
.icon-enter:before { content: "\e6a0"; } |
|||
|
|||
.icon-pushpino:before { content: "\e6a1"; } |
|||
|
|||
.icon-pushpin:before { content: "\e6a2"; } |
|||
|
|||
.icon-heart:before { content: "\e6a3"; } |
|||
|
|||
.icon-hearto:before { content: "\e6a4"; } |
|||
|
|||
.icon-smile-circle:before { content: "\e6a7"; } |
|||
|
|||
.icon-smileo:before { content: "\e6a8"; } |
|||
|
|||
.icon-frowno:before { content: "\e6a9"; } |
|||
|
|||
.icon-calculator:before { content: "\e6aa"; } |
|||
|
|||
.icon-chrome:before { content: "\e6ac"; } |
|||
|
|||
.icon-github:before { content: "\e6ad"; } |
|||
|
|||
.icon-iconfontdesktop:before { content: "\e6b4"; } |
|||
|
|||
.icon-caretcircleoup:before { content: "\e6b5"; } |
|||
|
|||
.icon-upload:before { content: "\e6b6"; } |
|||
|
|||
.icon-download:before { content: "\e6b7"; } |
|||
|
|||
.icon-piechart:before { content: "\e6b8"; } |
|||
|
|||
.icon-lock1:before { content: "\e6b9"; } |
|||
|
|||
.icon-unlock:before { content: "\e6ba"; } |
|||
|
|||
.icon-windowso:before { content: "\e6bc"; } |
|||
|
|||
.icon-dotchart:before { content: "\e6bd"; } |
|||
|
|||
.icon-barchart:before { content: "\e6be"; } |
|||
|
|||
.icon-codesquare:before { content: "\e6bf"; } |
|||
|
|||
.icon-plussquare:before { content: "\e6c0"; } |
|||
|
|||
.icon-minussquare:before { content: "\e6c1"; } |
|||
|
|||
.icon-closesquare:before { content: "\e6c2"; } |
|||
|
|||
.icon-closesquareo:before { content: "\e6c3"; } |
|||
|
|||
.icon-checksquare:before { content: "\e6c4"; } |
|||
|
|||
.icon-checksquareo:before { content: "\e6c5"; } |
|||
|
|||
.icon-fastbackward:before { content: "\e6c6"; } |
|||
|
|||
.icon-fastforward:before { content: "\e6c7"; } |
|||
|
|||
.icon-upsquare:before { content: "\e6c8"; } |
|||
|
|||
.icon-downsquare:before { content: "\e6c9"; } |
|||
|
|||
.icon-leftsquare:before { content: "\e6ca"; } |
|||
|
|||
.icon-rightsquare:before { content: "\e6cb"; } |
|||
|
|||
.icon-rightsquareo:before { content: "\e6cc"; } |
|||
|
|||
.icon-leftsquareo:before { content: "\e6cd"; } |
|||
|
|||
.icon-down-square-o:before { content: "\e6ce"; } |
|||
|
|||
.icon-up-square-o:before { content: "\e6cf"; } |
|||
|
|||
.icon-play:before { content: "\e6d0"; } |
|||
|
|||
.icon-playcircleo:before { content: "\e6d1"; } |
|||
|
|||
.icon-tag:before { content: "\e6d2"; } |
|||
|
|||
.icon-tago:before { content: "\e6d3"; } |
|||
|
|||
.icon-addfile:before { content: "\e910"; } |
|||
|
|||
.icon-folder1:before { content: "\e662"; } |
|||
|
|||
.icon-file1:before { content: "\e664"; } |
|||
|
|||
.icon-switcher:before { content: "\e913"; } |
|||
|
|||
.icon-addfolder:before { content: "\e914"; } |
|||
|
|||
.icon-folderopen:before { content: "\e699"; } |
|||
|
|||
.icon-search1:before { content: "\e670"; } |
|||
|
|||
.icon-ellipsis1:before { content: "\e647"; } |
|||
|
|||
.icon-calendar:before { content: "\e6bb"; } |
|||
|
|||
.icon-filetext1:before { content: "\e698"; } |
|||
|
|||
.icon-copy1:before { content: "\e648"; } |
|||
|
|||
.icon-jpgfile1:before { content: "\e69c"; } |
|||
|
|||
.icon-pdffile1:before { content: "\e6b3"; } |
|||
|
|||
.icon-exclefile1:before { content: "\e6b0"; } |
|||
|
|||
.icon-pptfile1:before { content: "\e6b1"; } |
|||
|
|||
.icon-unknowfile1:before { content: "\e6af"; } |
|||
|
|||
.icon-wordfile1:before { content: "\e6b2"; } |
|||
|
|||
.icon-dingding:before { content: "\e923"; } |
|||
|
|||
.icon-dingding-o:before { content: "\e925"; } |
|||
|
|||
.icon-mobile1:before { content: "\e678"; } |
|||
|
|||
.icon-tablet1:before { content: "\e66e"; } |
|||
|
|||
.icon-bells:before { content: "\e64e"; } |
|||
|
|||
.icon-disconnect:before { content: "\e64f"; } |
|||
|
|||
.icon-database:before { content: "\e650"; } |
|||
|
|||
.icon-barcode:before { content: "\e652"; } |
|||
|
|||
.icon-hourglass:before { content: "\e653"; } |
|||
|
|||
.icon-key:before { content: "\e654"; } |
|||
|
|||
.icon-flag:before { content: "\e655"; } |
|||
|
|||
.icon-layout:before { content: "\e656"; } |
|||
|
|||
.icon-printer:before { content: "\e673"; } |
|||
|
|||
.icon-USB:before { content: "\e6d7"; } |
|||
|
|||
.icon-skin:before { content: "\e6d8"; } |
|||
|
|||
.icon-tool:before { content: "\e6d9"; } |
|||
|
|||
.icon-car:before { content: "\e6dc"; } |
|||
|
|||
.icon-addusergroup:before { content: "\e6dd"; } |
|||
|
|||
.icon-carryout:before { content: "\e6df"; } |
|||
|
|||
.icon-deleteuser:before { content: "\e6e0"; } |
|||
|
|||
.icon-deleteusergroup:before { content: "\e6e1"; } |
|||
|
|||
.icon-man:before { content: "\e6e2"; } |
|||
|
|||
.icon-isv:before { content: "\e6e3"; } |
|||
|
|||
.icon-gift:before { content: "\e6e4"; } |
|||
|
|||
.icon-idcard:before { content: "\e6e5"; } |
|||
|
|||
.icon-medicinebox:before { content: "\e6e6"; } |
|||
|
|||
.icon-redenvelopes:before { content: "\e6e7"; } |
|||
|
|||
.icon-rest:before { content: "\e6e8"; } |
|||
|
|||
.icon-Safety:before { content: "\e6ea"; } |
|||
|
|||
.icon-wallet:before { content: "\e6eb"; } |
|||
|
|||
.icon-woman:before { content: "\e6ec"; } |
|||
|
|||
.icon-adduser:before { content: "\e6ed"; } |
|||
|
|||
.icon-bank:before { content: "\e6ee"; } |
|||
|
|||
.icon-Trophy:before { content: "\e6ef"; } |
|||
|
|||
.icon-loading1:before { content: "\e6ae"; } |
|||
|
|||
.icon-loading2:before { content: "\e64d"; } |
|||
|
|||
.icon-like2:before { content: "\e69d"; } |
|||
|
|||
.icon-dislike2:before { content: "\e69e"; } |
|||
|
|||
.icon-like1:before { content: "\e64c"; } |
|||
|
|||
.icon-dislike1:before { content: "\e64b"; } |
|||
|
|||
.icon-bulb1:before { content: "\e649"; } |
|||
|
|||
.icon-rocket1:before { content: "\e90f"; } |
|||
|
|||
.icon-select1:before { content: "\e64a"; } |
|||
|
|||
.icon-apple1:before { content: "\e68c"; } |
|||
|
|||
.icon-apple-o:before { content: "\e6d4"; } |
|||
|
|||
.icon-android1:before { content: "\e938"; } |
|||
|
|||
.icon-android:before { content: "\e68d"; } |
|||
|
|||
.icon-aliwangwang-o1:before { content: "\e68f"; } |
|||
|
|||
.icon-aliwangwang:before { content: "\e68e"; } |
|||
|
|||
.icon-pay-circle1:before { content: "\e6a5"; } |
|||
|
|||
.icon-pay-circle-o1:before { content: "\e6a6"; } |
|||
|
|||
.icon-poweroff:before { content: "\e6d5"; } |
|||
|
|||
.icon-trademark:before { content: "\e651"; } |
|||
|
|||
.icon-find:before { content: "\e6db"; } |
|||
|
|||
.icon-copyright:before { content: "\e6de"; } |
|||
|
|||
.icon-sound:before { content: "\e6e9"; } |
|||
|
|||
.icon-earth:before { content: "\e6f1"; } |
|||
|
|||
.icon-wifi:before { content: "\e6d6"; } |
|||
|
|||
.icon-sync:before { content: "\e6da"; } |
|||
|
|||
.icon-login:before { content: "\e657"; } |
|||
|
|||
.icon-logout:before { content: "\e65a"; } |
|||
|
|||
.icon-reload1:before { content: "\e616"; } |
|||
|
|||
.icon-message1:before { content: "\e6ab"; } |
|||
|
|||
.icon-shake:before { content: "\e94f"; } |
|||
|
|||
.icon-API:before { content: "\e951"; } |
|||
|
|||
.icon-appstore-o:before { content: "\e695"; } |
|||
|
|||
.icon-appstore1:before { content: "\e696"; } |
|||
|
|||
.icon-scan1:before { content: "\e697"; } |
|||
|
|||
.icon-exception1:before { content: "\e665"; } |
|||
|
|||
.icon-contacts:before { content: "\e6f0"; } |
|||
|
|||
.icon-solution1:before { content: "\e66f"; } |
|||
|
|||
.icon-fork:before { content: "\e6f2"; } |
|||
|
|||
.icon-edit1:before { content: "\e692"; } |
|||
|
Binary file not shown.
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 646 KiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 7.8 KiB |
Loading…
Reference in new issue