|
|
|
|
|
<!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">
|
|
|
<h1>IconFont 图标</h1>
|
|
|
<ul class="icon_lists clear">
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">评论</div>
|
|
|
<div class="code">&#xe624;</div>
|
|
|
<div class="fontclass">.pinglun</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">左三角</div>
|
|
|
<div class="code">&#xe618;</div>
|
|
|
<div class="fontclass">.zuosanjiao</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">右三角</div>
|
|
|
<div class="code">&#xe619;</div>
|
|
|
<div class="fontclass">.yousanjiao</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">向下</div>
|
|
|
<div class="code">&#xe60b;</div>
|
|
|
<div class="fontclass">.chevron-down</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">向右</div>
|
|
|
<div class="code">&#xe60c;</div>
|
|
|
<div class="fontclass">.chevron-right</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">对号</div>
|
|
|
<div class="code">&#xe605;</div>
|
|
|
<div class="fontclass">.duihao</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">购物车</div>
|
|
|
<div class="code">&#xe61b;</div>
|
|
|
<div class="fontclass">.gouwuche</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">叉</div>
|
|
|
<div class="code">&#xe60d;</div>
|
|
|
<div class="fontclass">.cha</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">forbid</div>
|
|
|
<div class="code">&#xe61c;</div>
|
|
|
<div class="fontclass">.forbid</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">left</div>
|
|
|
<div class="code">&#xe60e;</div>
|
|
|
<div class="fontclass">.left</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">sort</div>
|
|
|
<div class="code">&#xe614;</div>
|
|
|
<div class="fontclass">.sort</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">时间</div>
|
|
|
<div class="code">&#xe625;</div>
|
|
|
<div class="fontclass">.iconsj</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">search</div>
|
|
|
<div class="code">&#xe60f;</div>
|
|
|
<div class="fontclass">.search</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">三角2</div>
|
|
|
<div class="code">&#xe615;</div>
|
|
|
<div class="fontclass">.sanjiao2</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">三角1</div>
|
|
|
<div class="code">&#xe610;</div>
|
|
|
<div class="fontclass">.sanjiao1</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">向右</div>
|
|
|
<div class="code">&#xe608;</div>
|
|
|
<div class="fontclass">.xiangyou</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">向左</div>
|
|
|
<div class="code">&#xe609;</div>
|
|
|
<div class="fontclass">.xiangzuo</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">问号</div>
|
|
|
<div class="code">&#xe620;</div>
|
|
|
<div class="fontclass">.wenhao</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">向下</div>
|
|
|
<div class="code">&#xe61d;</div>
|
|
|
<div class="fontclass">.xiangxia</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">电话</div>
|
|
|
<div class="code">&#xe621;</div>
|
|
|
<div class="fontclass">.dianhua</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">time</div>
|
|
|
<div class="code">&#xe60a;</div>
|
|
|
<div class="fontclass">.time</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">赞</div>
|
|
|
<div class="code">&#xe626;</div>
|
|
|
<div class="fontclass">.zan</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">up</div>
|
|
|
<div class="code">&#xe607;</div>
|
|
|
<div class="fontclass">.up</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">Heart</div>
|
|
|
<div class="code">&#xe611;</div>
|
|
|
<div class="fontclass">.heart</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">login_check_button1</div>
|
|
|
<div class="code">&#xe616;</div>
|
|
|
<div class="fontclass">.logincheckbutton1</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">mail</div>
|
|
|
<div class="code">&#xe601;</div>
|
|
|
<div class="fontclass">.aaa</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">评论</div>
|
|
|
<div class="code">&#xe61e;</div>
|
|
|
<div class="fontclass">.pinglun1</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">正确</div>
|
|
|
<div class="code">&#xe622;</div>
|
|
|
<div class="fontclass">.zhengque</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">circle</div>
|
|
|
<div class="code">&#xe606;</div>
|
|
|
<div class="fontclass">.circle</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">eye</div>
|
|
|
<div class="code">&#xe627;</div>
|
|
|
<div class="fontclass">.eye</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">03-叹号</div>
|
|
|
<div class="code">&#xe61f;</div>
|
|
|
<div class="fontclass">.03tanhao</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">home</div>
|
|
|
<div class="code">&#xe61a;</div>
|
|
|
<div class="fontclass">.home</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">shopping-card</div>
|
|
|
<div class="code">&#xe600;</div>
|
|
|
<div class="fontclass">.shoppingcard</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">checkbox-checked</div>
|
|
|
<div class="code">&#xe617;</div>
|
|
|
<div class="fontclass">.checkboxchecked</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">五角星</div>
|
|
|
<div class="code">&#xe623;</div>
|
|
|
<div class="fontclass">.wujiaoxing</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">select</div>
|
|
|
<div class="code">&#xe612;</div>
|
|
|
<div class="fontclass">.zhengchang</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">selected</div>
|
|
|
<div class="code">&#xe613;</div>
|
|
|
<div class="fontclass">.weibiaoti7</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">sya</div>
|
|
|
<div class="code">&#xe602;</div>
|
|
|
<div class="fontclass">.say1</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">7days</div>
|
|
|
<div class="code">&#xe603;</div>
|
|
|
<div class="fontclass">.7t11</div>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<i class="icon iconfont"></i>
|
|
|
<div class="name">zheng</div>
|
|
|
<div class="code">&#xe604;</div>
|
|
|
<div class="fontclass">.z</div>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<div class="helps">
|
|
|
第一步:使用font-face声明字体
|
|
|
<pre>
|
|
|
@font-face {font-family: 'iconfont';
|
|
|
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#iconfont') format('svg'); /* iOS 4.1- */
|
|
|
}
|
|
|
</pre>
|
|
|
第二步:定义使用iconfont的样式
|
|
|
<pre>
|
|
|
.iconfont{
|
|
|
font-family:"iconfont" !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="iconfont">&#x33;</i>
|
|
|
</pre>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |