|
<!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">&#xe64f;</div>
|
<div class="fontclass">.dingwei</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">地图标点_b</div>
|
<div class="code">&#xe651;</div>
|
<div class="fontclass">.ditubiaodianb</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">上箭头</div>
|
<div class="code">&#xe624;</div>
|
<div class="fontclass">.shangjiantou</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">添加</div>
|
<div class="code">&#xe645;</div>
|
<div class="fontclass">.tianjia</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">个人信息</div>
|
<div class="code">&#xe63c;</div>
|
<div class="fontclass">.gerenxinxi</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">上传</div>
|
<div class="code">&#xe602;</div>
|
<div class="fontclass">.shangchuan</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">企业</div>
|
<div class="code">&#xe62c;</div>
|
<div class="fontclass">.qiye</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">分类</div>
|
<div class="code">&#xe62f;</div>
|
<div class="fontclass">.fenlei</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">播放</div>
|
<div class="code">&#xe630;</div>
|
<div class="fontclass">.bofang</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">举报</div>
|
<div class="code">&#xe652;</div>
|
<div class="fontclass">.jubao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">个人中心</div>
|
<div class="code">&#xe656;</div>
|
<div class="fontclass">.user</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">搜索</div>
|
<div class="code">&#xe62e;</div>
|
<div class="fontclass">.sousuo</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">海岛</div>
|
<div class="code">&#xe649;</div>
|
<div class="fontclass">.haidao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">二维码</div>
|
<div class="code">&#xe60e;</div>
|
<div class="fontclass">.erweima</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">微信</div>
|
<div class="code">&#xe635;</div>
|
<div class="fontclass">.weixin</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">向下箭头</div>
|
<div class="code">&#xe618;</div>
|
<div class="fontclass">.xia</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">首页</div>
|
<div class="code">&#xe646;</div>
|
<div class="fontclass">.yingsaitong</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">录音</div>
|
<div class="code">&#xe615;</div>
|
<div class="fontclass">.luyin</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">微信</div>
|
<div class="code">&#xe643;</div>
|
<div class="fontclass">.weixin1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">新闻</div>
|
<div class="code">&#xe601;</div>
|
<div class="fontclass">.xinwen</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">时间</div>
|
<div class="code">&#xe628;</div>
|
<div class="fontclass">.shijian</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">编辑</div>
|
<div class="code">&#xe60f;</div>
|
<div class="fontclass">.bianji</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">多云</div>
|
<div class="code">&#xe64a;</div>
|
<div class="fontclass">.duoyun</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">个人</div>
|
<div class="code">&#xe636;</div>
|
<div class="fontclass">.geren</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">人</div>
|
<div class="code">&#xe62b;</div>
|
<div class="fontclass">.ren</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">位置</div>
|
<div class="code">&#xe631;</div>
|
<div class="fontclass">.weizhi</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数据统计</div>
|
<div class="code">&#xe654;</div>
|
<div class="fontclass">.shujutongji</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">书本_disc</div>
|
<div class="code">&#xe611;</div>
|
<div class="fontclass">.shubendisc</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">更多-菜单</div>
|
<div class="code">&#xe634;</div>
|
<div class="fontclass">.more-menu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数据监控</div>
|
<div class="code">&#xe65c;</div>
|
<div class="fontclass">.shujujiankong</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">多云</div>
|
<div class="code">&#xe612;</div>
|
<div class="fontclass">.duoyun1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">坐标</div>
|
<div class="code">&#xe600;</div>
|
<div class="fontclass">.zuobiao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">咨询</div>
|
<div class="code">&#xe64c;</div>
|
<div class="fontclass">.consult</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">加号</div>
|
<div class="code">&#xe653;</div>
|
<div class="fontclass">.jiahao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">用户</div>
|
<div class="code">&#xe661;</div>
|
<div class="fontclass">.user1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">分享</div>
|
<div class="code">&#xe610;</div>
|
<div class="fontclass">.fenxiang</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">地图定位 居中</div>
|
<div class="code">&#xe660;</div>
|
<div class="fontclass">.ditudingwei</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">图片</div>
|
<div class="code">&#xe65d;</div>
|
<div class="fontclass">.tupian</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">排序</div>
|
<div class="code">&#xe60c;</div>
|
<div class="fontclass">.paixu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">发起活动</div>
|
<div class="code">&#xe619;</div>
|
<div class="fontclass">.faqihuodong</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">手机</div>
|
<div class="code">&#xe632;</div>
|
<div class="fontclass">.shouji</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">人数</div>
|
<div class="code">&#xe64d;</div>
|
<div class="fontclass">.renshu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">分类</div>
|
<div class="code">&#xe617;</div>
|
<div class="fontclass">.100</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">电话</div>
|
<div class="code">&#xe637;</div>
|
<div class="fontclass">.dianhua</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">汽车</div>
|
<div class="code">&#xe644;</div>
|
<div class="fontclass">.qiche</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">身份证</div>
|
<div class="code">&#xe662;</div>
|
<div class="fontclass">.cardid</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">加号</div>
|
<div class="code">&#xe604;</div>
|
<div class="fontclass">.font45</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">家电_录音</div>
|
<div class="code">&#xe633;</div>
|
<div class="fontclass">.jiadianluyin</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">添加</div>
|
<div class="code">&#xe647;</div>
|
<div class="fontclass">.tianjia1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">水</div>
|
<div class="code">&#xe64b;</div>
|
<div class="fontclass">.shui</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">保存</div>
|
<div class="code">&#xe616;</div>
|
<div class="fontclass">.baocun-copy</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">iconfont-pdf</div>
|
<div class="code">&#xe663;</div>
|
<div class="fontclass">.iconfontpdf</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">基站</div>
|
<div class="code">&#xe62d;</div>
|
<div class="fontclass">.heilongjiangtubiao07</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">公告</div>
|
<div class="code">&#xe658;</div>
|
<div class="fontclass">.gonggao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">关于我们</div>
|
<div class="code">&#xe63d;</div>
|
<div class="fontclass">.guanyuwomen</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">刷新</div>
|
<div class="code">&#xe626;</div>
|
<div class="fontclass">.shuaxin</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字0</div>
|
<div class="code">&#xe625;</div>
|
<div class="fontclass">.icon40</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字1</div>
|
<div class="code">&#xe61b;</div>
|
<div class="fontclass">.icon41</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字2</div>
|
<div class="code">&#xe61c;</div>
|
<div class="fontclass">.icon42</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字3</div>
|
<div class="code">&#xe61d;</div>
|
<div class="fontclass">.icon43</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字4</div>
|
<div class="code">&#xe61e;</div>
|
<div class="fontclass">.icon44</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字5</div>
|
<div class="code">&#xe61f;</div>
|
<div class="fontclass">.icon45</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字6</div>
|
<div class="code">&#xe620;</div>
|
<div class="fontclass">.icon46</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字7</div>
|
<div class="code">&#xe621;</div>
|
<div class="fontclass">.icon47</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字8</div>
|
<div class="code">&#xe622;</div>
|
<div class="fontclass">.icon48</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">数字9</div>
|
<div class="code">&#xe623;</div>
|
<div class="fontclass">.icon49</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">拍照</div>
|
<div class="code">&#xe605;</div>
|
<div class="fontclass">.paizhao</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">叉</div>
|
<div class="code">&#xe640;</div>
|
<div class="fontclass">.fork</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">上传</div>
|
<div class="code">&#xe606;</div>
|
<div class="fontclass">.shangchuan1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">阅读</div>
|
<div class="code">&#xe629;</div>
|
<div class="fontclass">.yuedu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">推荐人数</div>
|
<div class="code">&#xe62a;</div>
|
<div class="fontclass">.tuijianrenshu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">图片打开失败</div>
|
<div class="code">&#xe607;</div>
|
<div class="fontclass">.tupiandakaishibai</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">地图 地址</div>
|
<div class="code">&#xe627;</div>
|
<div class="fontclass">.ditudizhi</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">加载失败</div>
|
<div class="code">&#xe608;</div>
|
<div class="fontclass">.jiazaishibai</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">对勾</div>
|
<div class="code">&#xe603;</div>
|
<div class="fontclass">.duigou</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">查看</div>
|
<div class="code">&#xe641;</div>
|
<div class="fontclass">.chakan</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">咨询</div>
|
<div class="code">&#xe61a;</div>
|
<div class="fontclass">.zixun</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">盾牌2</div>
|
<div class="code">&#xe613;</div>
|
<div class="fontclass">.shield2</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">锁2</div>
|
<div class="code">&#xe638;</div>
|
<div class="fontclass">.suo2</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">锁1</div>
|
<div class="code">&#xe639;</div>
|
<div class="fontclass">.suo1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">实名认证</div>
|
<div class="code">&#xe63e;</div>
|
<div class="fontclass">.shimingrenzheng</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">周边</div>
|
<div class="code">&#xe64e;</div>
|
<div class="fontclass">.zhoubian</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">报价</div>
|
<div class="code">&#xe614;</div>
|
<div class="fontclass">.icon5</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">意见反馈</div>
|
<div class="code">&#xe63f;</div>
|
<div class="fontclass">.yijianfankui</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">记录</div>
|
<div class="code">&#xe650;</div>
|
<div class="fontclass">.jilu</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">在线创作</div>
|
<div class="code">&#xe609;</div>
|
<div class="fontclass">.zaixianchuangzuo</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">好评</div>
|
<div class="code">&#xe657;</div>
|
<div class="fontclass">.iconfonthaopin</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">加载</div>
|
<div class="code">&#xe60a;</div>
|
<div class="fontclass">.loading-copy</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">箭头</div>
|
<div class="code">&#xe60b;</div>
|
<div class="fontclass">.jiantou-copy</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">箭头</div>
|
<div class="code">&#xe60d;</div>
|
<div class="fontclass">.jiantou-copy-copy</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">QQ</div>
|
<div class="code">&#xe63a;</div>
|
<div class="fontclass">.icon</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">摄氏度</div>
|
<div class="code">&#xe63b;</div>
|
<div class="fontclass">.icon1</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">云_线</div>
|
<div class="code">&#xe65f;</div>
|
<div class="fontclass">.yunxian</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">填写</div>
|
<div class="code">&#xe65e;</div>
|
<div class="fontclass">.tianxie</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">修改</div>
|
<div class="code">&#xe655;</div>
|
<div class="fontclass">.xiugai</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">上箭头</div>
|
<div class="code">&#xe642;</div>
|
<div class="fontclass">.shangjiantou-copy</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">星星</div>
|
<div class="code">&#xe659;</div>
|
<div class="fontclass">.xingxing</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">点</div>
|
<div class="code">&#xe65a;</div>
|
<div class="fontclass">.dian</div>
|
</li>
|
|
<li>
|
<i class="icon iconfont"></i>
|
<div class="name">点</div>
|
<div class="code">&#xe65b;</div>
|
<div class="fontclass">.dian-copy</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>
|
