ucf-fe
Version:
467 lines (401 loc) • 18.7 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>ecmifont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main">
<h1>ecmifont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon ecmifont"></i>
<div class="name">用户管理</div>
<div class="code">&#xe608;</div>
<div class="fontclass">.yonghuguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">友情链接</div>
<div class="code">&#xe609;</div>
<div class="fontclass">.youqinglianjie</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">退货审批</div>
<div class="code">&#xe60a;</div>
<div class="fontclass">.tuihuoshenpi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">销售排名</div>
<div class="code">&#xe60b;</div>
<div class="fontclass">.xiaoshoupaiming</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">自建商品</div>
<div class="code">&#xe60c;</div>
<div class="fontclass">.zijianshangpin</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品分类</div>
<div class="code">&#xe60d;</div>
<div class="fontclass">.shangpinfenlei</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品规格</div>
<div class="code">&#xe60e;</div>
<div class="fontclass">.shangpinguige</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品入库</div>
<div class="code">&#xe60f;</div>
<div class="fontclass">.shangpinruku</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品上架</div>
<div class="code">&#xe610;</div>
<div class="fontclass">.shangpinshangjia</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品属性</div>
<div class="code">&#xe611;</div>
<div class="fontclass">.shangpinshuxing</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">留言管理</div>
<div class="code">&#xe612;</div>
<div class="fontclass">.liuyanguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">缺货排名</div>
<div class="code">&#xe613;</div>
<div class="fontclass">.quehuopaiming</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">入库单管理</div>
<div class="code">&#xe614;</div>
<div class="fontclass">.rukudanguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品出库</div>
<div class="code">&#xe615;</div>
<div class="fontclass">.shangpinchuku</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">店铺设置</div>
<div class="code">&#xe616;</div>
<div class="fontclass">.dianpushezhi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">结存维护</div>
<div class="code">&#xe617;</div>
<div class="fontclass">.jiecunweihu</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">补货签收</div>
<div class="code">&#xe618;</div>
<div class="fontclass">.buhuoqianshou</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">菜单管理</div>
<div class="code">&#xe619;</div>
<div class="fontclass">.caidanguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">出库单管理</div>
<div class="code">&#xe61a;</div>
<div class="fontclass">.chukudanguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">出入库明</div>
<div class="code">&#xe61b;</div>
<div class="fontclass">.churukuming</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">存量查询</div>
<div class="code">&#xe61c;</div>
<div class="fontclass">.cunliangchaxun</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">角色管理</div>
<div class="code">&#xe61d;</div>
<div class="fontclass">.jiaoseguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">出库单管理</div>
<div class="code">&#xe61e;</div>
<div class="fontclass">.chukudanguanli1</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">发起结算</div>
<div class="code">&#xe61f;</div>
<div class="fontclass">.faqijiesuan</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品sku</div>
<div class="code">&#xe620;</div>
<div class="fontclass">.shangpinsku</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">账户设置</div>
<div class="code">&#xe621;</div>
<div class="fontclass">.zhanghushezhi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">订单处理</div>
<div class="code">&#xe622;</div>
<div class="fontclass">.dingdanchuli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">栏目管理</div>
<div class="code">&#xe623;</div>
<div class="fontclass">.lanmuguanli</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">模板设置</div>
<div class="code">&#xe624;</div>
<div class="fontclass">.mobanshezhi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">下载</div>
<div class="code">&#xe602;</div>
<div class="fontclass">.xiazai</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">停用</div>
<div class="code">&#xe603;</div>
<div class="fontclass">.tingyong</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">上传</div>
<div class="code">&#xe604;</div>
<div class="fontclass">.shangchuan</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">启用</div>
<div class="code">&#xe605;</div>
<div class="fontclass">.qiyong</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">fangdajing</div>
<div class="code">&#xe600;</div>
<div class="fontclass">.fangdajing</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">fangdajing1</div>
<div class="code">&#xe601;</div>
<div class="fontclass">.fangdajing1</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">商品列表图标02</div>
<div class="code">&#xe607;</div>
<div class="fontclass">.shangpinliebiaotubiao02</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">gongneng</div>
<div class="code">&#xe627;</div>
<div class="fontclass">.gongneng</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">jiaose</div>
<div class="code">&#xe628;</div>
<div class="fontclass">.jiaose</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">ecmifontadd2</div>
<div class="code">&#xe62d;</div>
<div class="fontclass">.ecmifontadd2</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shangchu</div>
<div class="code">&#xe62e;</div>
<div class="fontclass">.shangchu</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shuaxin2</div>
<div class="code">&#xe62f;</div>
<div class="fontclass">.shuaxin2</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">zuzhi</div>
<div class="code">&#xe625;</div>
<div class="fontclass">.zuzhi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">tanhao</div>
<div class="code">&#xe626;</div>
<div class="fontclass">.tanhao</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">suokai</div>
<div class="code">&#xe629;</div>
<div class="fontclass">.suokai</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">suo</div>
<div class="code">&#xe62a;</div>
<div class="fontclass">.suo</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shuaxin2</div>
<div class="code">&#xe62b;</div>
<div class="fontclass">.shuaxin21</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shopper</div>
<div class="code">&#xe62c;</div>
<div class="fontclass">.shopper</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shenhe</div>
<div class="code">&#xe630;</div>
<div class="fontclass">.shenhe</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">qudao</div>
<div class="code">&#xe631;</div>
<div class="fontclass">.qudao</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">pause</div>
<div class="code">&#xe632;</div>
<div class="fontclass">.pause</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">K</div>
<div class="code">&#xe633;</div>
<div class="fontclass">.k</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">jiaose</div>
<div class="code">&#xe634;</div>
<div class="fontclass">.jiaose1</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">gongneng</div>
<div class="code">&#xe635;</div>
<div class="fontclass">.gongneng1</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">fuzhi</div>
<div class="code">&#xe636;</div>
<div class="fontclass">.fuzhi</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">dianpu</div>
<div class="code">&#xe637;</div>
<div class="fontclass">.dianpu</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">bianji</div>
<div class="code">&#xe638;</div>
<div class="fontclass">.bianji</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">beizhu</div>
<div class="code">&#xe639;</div>
<div class="fontclass">.beizhu</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">zanting</div>
<div class="code">&#xe63a;</div>
<div class="fontclass">.zanting</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">shanchu1</div>
<div class="code">&#xe63b;</div>
<div class="fontclass">.shanchu1</div>
</li>
<li>
<i class="icon ecmifont"></i>
<div class="name">liebiao</div>
<div class="code">&#xe606;</div>
<div class="fontclass">.liebiao</div>
</li>
</ul>
<div class="helps">
第一步：使用font-face声明字体
<pre>
@font-face {font-family: 'ecmifont';
src: url('ecmifont.eot'); /* IE9*/
src: url('ecmifont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('ecmifont.woff') format('woff'), /* chrome、firefox */
url('ecmifont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('ecmifont.svg#ecmifont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用ecmifont的样式
<pre>
.ecmifont{
font-family:"ecmifont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
<i class="ecmifont">&#x33;</i>
</pre>
</div>
</div>
</body>
</html>