ucf-fe
Version:
642 lines (551 loc) • 25.7 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>menufont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main">
<h1>menufont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon menufont"></i>
<div class="name">music</div>
<div class="code">&#xe601;</div>
<div class="fontclass">.C-music</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">photo</div>
<div class="code">&#xe602;</div>
<div class="fontclass">.C-photo</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">heart</div>
<div class="code">&#xe604;</div>
<div class="fontclass">.C-heart</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">book</div>
<div class="code">&#xe605;</div>
<div class="fontclass">.C-book</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">phone</div>
<div class="code">&#xe607;</div>
<div class="fontclass">.C-phone</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">lock</div>
<div class="code">&#xe608;</div>
<div class="fontclass">.C-lock</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">html5</div>
<div class="code">&#xe609;</div>
<div class="fontclass">.C-html5</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">OS_Linux</div>
<div class="code">&#xe60a;</div>
<div class="fontclass">.C-oslinux</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">gears</div>
<div class="code">&#xe60d;</div>
<div class="fontclass">.C-gears</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">fire</div>
<div class="code">&#xe60e;</div>
<div class="fontclass">.C-fire</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">flags</div>
<div class="code">&#xe610;</div>
<div class="fontclass">.C-flags</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">ios-cloud</div>
<div class="code">&#xe611;</div>
<div class="fontclass">.C-ioscloud</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">menufont-plane</div>
<div class="code">&#xe612;</div>
<div class="fontclass">.C-menufontplane</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">facetime</div>
<div class="code">&#xe613;</div>
<div class="fontclass">.C-facetime</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">win</div>
<div class="code">&#xe614;</div>
<div class="fontclass">.C-win</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">github</div>
<div class="code">&#xe615;</div>
<div class="fontclass">.C-github</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">bug</div>
<div class="code">&#xe616;</div>
<div class="fontclass">.C-bug</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">desktop</div>
<div class="code">&#xe617;</div>
<div class="fontclass">.C-desktop</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">money</div>
<div class="code">&#xe618;</div>
<div class="fontclass">.C-money</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">qrcode</div>
<div class="code">&#xe619;</div>
<div class="fontclass">.C-qrcode</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">suitcase</div>
<div class="code">&#xe61a;</div>
<div class="fontclass">.C-suitcase</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">bookmarks</div>
<div class="code">&#xe626;</div>
<div class="fontclass">.C-bookmarks</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">uesrs</div>
<div class="code">&#xe627;</div>
<div class="fontclass">.C-uesrs</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">dribble</div>
<div class="code">&#xe61d;</div>
<div class="fontclass">.C-dribble</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">android</div>
<div class="code">&#xe60b;</div>
<div class="fontclass">.C-android</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">app</div>
<div class="code">&#xe60c;</div>
<div class="fontclass">.C-app</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">authorization-</div>
<div class="code">&#xe60f;</div>
<div class="fontclass">.C-authorization</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">chemical</div>
<div class="code">&#xe61b;</div>
<div class="fontclass">.C-chemical</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">favorite</div>
<div class="code">&#xe61c;</div>
<div class="fontclass">.C-favorite</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">gift</div>
<div class="code">&#xe61e;</div>
<div class="fontclass">.C-gift</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">home</div>
<div class="code">&#xe61f;</div>
<div class="fontclass">.C-home</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">more</div>
<div class="code">&#xe620;</div>
<div class="fontclass">.C-more</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">organization</div>
<div class="code">&#xe621;</div>
<div class="fontclass">.C-organization</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">palette</div>
<div class="code">&#xe622;</div>
<div class="fontclass">.C-palette</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">setting</div>
<div class="code">&#xe623;</div>
<div class="fontclass">.C-setting</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">statistical</div>
<div class="code">&#xe624;</div>
<div class="fontclass">.C-statistical</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">tea</div>
<div class="code">&#xe625;</div>
<div class="fontclass">.C-tea</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">electricity</div>
<div class="code">&#xe628;</div>
<div class="fontclass">.C-electricity</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">enterprise</div>
<div class="code">&#xe629;</div>
<div class="fontclass">.C-enterprise</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">erp</div>
<div class="code">&#xe62a;</div>
<div class="fontclass">.C-erp</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">maintain</div>
<div class="code">&#xe62b;</div>
<div class="fontclass">.C-maintain</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">organization-icon</div>
<div class="code">&#xe62c;</div>
<div class="fontclass">.C-organizationicon</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">requisition</div>
<div class="code">&#xe62d;</div>
<div class="fontclass">.C-requisition</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">role</div>
<div class="code">&#xe62e;</div>
<div class="fontclass">.C-role</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">sales together</div>
<div class="code">&#xe62f;</div>
<div class="fontclass">.C-salestogether</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">sales</div>
<div class="code">&#xe630;</div>
<div class="fontclass">.C-sales</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">shopping</div>
<div class="code">&#xe631;</div>
<div class="fontclass">.C-shopping</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">subscription</div>
<div class="code">&#xe635;</div>
<div class="fontclass">.C-subscription</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">source</div>
<div class="code">&#xe636;</div>
<div class="fontclass">.C-source</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">apple</div>
<div class="code">&#xe603;</div>
<div class="fontclass">.C-apple</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">pad</div>
<div class="code">&#xe606;</div>
<div class="fontclass">.C-pad</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">car</div>
<div class="code">&#xe637;</div>
<div class="fontclass">.C-car</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-1688</div>
<div class="code">&#xe600;</div>
<div class="fontclass">.C-c1688</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-approve</div>
<div class="code">&#xe632;</div>
<div class="fontclass">.C-capprove</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-AUTH</div>
<div class="code">&#xe633;</div>
<div class="fontclass">.C-cauth</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-car right</div>
<div class="code">&#xe634;</div>
<div class="fontclass">.C-ccarright</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-class g</div>
<div class="code">&#xe638;</div>
<div class="fontclass">.C-classg</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-classy</div>
<div class="code">&#xe639;</div>
<div class="fontclass">.C-cclassy</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-delivery</div>
<div class="code">&#xe63a;</div>
<div class="fontclass">.C-cdelivery</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-enterprise</div>
<div class="code">&#xe63b;</div>
<div class="fontclass">.C-centerprise</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-goods</div>
<div class="code">&#xe63c;</div>
<div class="fontclass">.C-cgoods</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-inquiry</div>
<div class="code">&#xe63d;</div>
<div class="fontclass">.C-cinquiry</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-invioce</div>
<div class="code">&#xe63e;</div>
<div class="fontclass">.C-cinvioce</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-material</div>
<div class="code">&#xe63f;</div>
<div class="fontclass">.C-cmaterial</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-offer</div>
<div class="code">&#xe640;</div>
<div class="fontclass">.C-coffer</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-order</div>
<div class="code">&#xe641;</div>
<div class="fontclass">.C-corder</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-org</div>
<div class="code">&#xe642;</div>
<div class="fontclass">.C-corg</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-pro</div>
<div class="code">&#xe643;</div>
<div class="fontclass">.C-cpro</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-process</div>
<div class="code">&#xe644;</div>
<div class="fontclass">.C-cprocess</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-security</div>
<div class="code">&#xe645;</div>
<div class="fontclass">.C-csecurity</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-shipping</div>
<div class="code">&#xe646;</div>
<div class="fontclass">.C-cshipping</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">C-storage</div>
<div class="code">&#xe647;</div>
<div class="fontclass">.C-cstorage</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name"> C-gateway</div>
<div class="code">&#xe648;</div>
<div class="fontclass">.C-cgateway</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name"> C-scalling</div>
<div class="code">&#xe649;</div>
<div class="fontclass">.C-cscalling</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name"> C-supplier</div>
<div class="code">&#xe64a;</div>
<div class="fontclass">.C-csupplier</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name"> C-users</div>
<div class="code">&#xe64b;</div>
<div class="fontclass">.C-cusers</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">handinvolice</div>
<div class="code">&#xe64c;</div>
<div class="fontclass">.C-handinvolice</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">incoiceapply</div>
<div class="code">&#xe64d;</div>
<div class="fontclass">.C-incoiceapply</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">invoicehis</div>
<div class="code">&#xe64e;</div>
<div class="fontclass">.C-invoicehis</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">invoiceinformation</div>
<div class="code">&#xe64f;</div>
<div class="fontclass">.C-invoiceinformation</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">taxequipment</div>
<div class="code">&#xe650;</div>
<div class="fontclass">.C-taxequipment</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">taxinformation</div>
<div class="code">&#xe651;</div>
<div class="fontclass">.C-taxinformation</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">共享服务</div>
<div class="code">&#xe652;</div>
<div class="fontclass">.gongxiangfuwu</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">系统设置</div>
<div class="code">&#xe653;</div>
<div class="fontclass">.xitongshezhi</div>
</li>
<li>
<i class="icon menufont"></i>
<div class="name">员工假勤</div>
<div class="code">&#xe654;</div>
<div class="fontclass">.yuangongjiaqin</div>
</li>
</ul>
<div class="helps">
第一步：使用font-face声明字体
<pre>
@font-face {font-family: 'menufont';
src: url('menufont.eot'); /* IE9*/
src: url('menufont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('menufont.woff') format('woff'), /* chrome、firefox */
url('menufont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('menufont.svg#menufont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用menufont的样式
<pre>
.menufont{
font-family:"menufont" !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="menufont">&#x33;</i>
</pre>
</div>
</div>
</body>
</html>