
<!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">&#xf0022;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xf0022;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0023;</i>
                    <div class="name">上传</div>
                    <div class="code">&amp;#xf0023;</div>
                    <div class="fontclass">.shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0025;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xf0025;</div>
                    <div class="fontclass">.liebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0036;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xf0036;</div>
                    <div class="fontclass">.yinle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0044;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#xf0044;</div>
                    <div class="fontclass">.tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0063;</i>
                    <div class="name">日历</div>
                    <div class="code">&amp;#xf0063;</div>
                    <div class="fontclass">.rili</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0070;</i>
                    <div class="name">平板电脑</div>
                    <div class="code">&amp;#xf0070;</div>
                    <div class="fontclass">.pingbandiannao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0091;</i>
                    <div class="name">显示器</div>
                    <div class="code">&amp;#xf0091;</div>
                    <div class="fontclass">.xianshiqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00b2;</i>
                    <div class="name">正确</div>
                    <div class="code">&amp;#xf00b2;</div>
                    <div class="fontclass">.zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00b3;</i>
                    <div class="name">错误</div>
                    <div class="code">&amp;#xf00b3;</div>
                    <div class="fontclass">.cuowu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00b8;</i>
                    <div class="name">帮助</div>
                    <div class="code">&amp;#xf00b8;</div>
                    <div class="fontclass">.bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00b7;</i>
                    <div class="name">警告</div>
                    <div class="code">&amp;#xf00b7;</div>
                    <div class="fontclass">.jinggao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00e1;</i>
                    <div class="name">目录</div>
                    <div class="code">&amp;#xf00e1;</div>
                    <div class="fontclass">.mulu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0111;</i>
                    <div class="name">排序</div>
                    <div class="code">&amp;#xf0111;</div>
                    <div class="fontclass">.paixu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0112;</i>
                    <div class="name">向左</div>
                    <div class="code">&amp;#xf0112;</div>
                    <div class="fontclass">.xiangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0113;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xf0113;</div>
                    <div class="fontclass">.xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0114;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xf0114;</div>
                    <div class="fontclass">.xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf012b;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xf012b;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf012c;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xf012c;</div>
                    <div class="fontclass">.sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf012d;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xf012d;</div>
                    <div class="fontclass">.yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf012f;</i>
                    <div class="name">分享</div>
                    <div class="code">&amp;#xf012f;</div>
                    <div class="fontclass">.fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013a;</i>
                    <div class="name">撤销</div>
                    <div class="code">&amp;#xf013a;</div>
                    <div class="fontclass">.chexiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013b;</i>
                    <div class="name">重做</div>
                    <div class="code">&amp;#xf013b;</div>
                    <div class="fontclass">.zhongzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013e;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xf013e;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013c;</i>
                    <div class="name">赞扬</div>
                    <div class="code">&amp;#xf013c;</div>
                    <div class="fontclass">.zanyang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013f;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xf013f;</div>
                    <div class="fontclass">.shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0144;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xf0144;</div>
                    <div class="fontclass">.shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014a;</i>
                    <div class="name">位置</div>
                    <div class="code">&amp;#xf014a;</div>
                    <div class="fontclass">.weizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0154;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xf0154;</div>
                    <div class="fontclass">.jia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0155;</i>
                    <div class="name">错误</div>
                    <div class="code">&amp;#xf0155;</div>
                    <div class="fontclass">.cuowu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0156;</i>
                    <div class="name">正确</div>
                    <div class="code">&amp;#xf0156;</div>
                    <div class="fontclass">.zhengque1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015b;</i>
                    <div class="name">附件</div>
                    <div class="code">&amp;#xf015b;</div>
                    <div class="fontclass">.fujian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015c;</i>
                    <div class="name">刷新</div>
                    <div class="code">&amp;#xf015c;</div>
                    <div class="fontclass">.shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015f;</i>
                    <div class="name">大缩略图列表</div>
                    <div class="code">&amp;#xf015f;</div>
                    <div class="fontclass">.dasuolvetuliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0161;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xf0161;</div>
                    <div class="fontclass">.liebiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0163;</i>
                    <div class="name">下载</div>
                    <div class="code">&amp;#xf0163;</div>
                    <div class="fontclass">.xiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0165;</i>
                    <div class="name">发送邮件</div>
                    <div class="code">&amp;#xf0165;</div>
                    <div class="fontclass">.fasongyoujian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0168;</i>
                    <div class="name">编辑模板</div>
                    <div class="code">&amp;#xf0168;</div>
                    <div class="fontclass">.bianjimoban</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016d;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xf016d;</div>
                    <div class="fontclass">.xiangyou1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016e;</i>
                    <div class="name">向左</div>
                    <div class="code">&amp;#xf016e;</div>
                    <div class="fontclass">.xiangzuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016f;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xf016f;</div>
                    <div class="fontclass">.xiangshang1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0170;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xf0170;</div>
                    <div class="fontclass">.xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0175;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xf0175;</div>
                    <div class="fontclass">.jia1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0176;</i>
                    <div class="name">减</div>
                    <div class="code">&amp;#xf0176;</div>
                    <div class="fontclass">.jian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0178;</i>
                    <div class="name">购物车满</div>
                    <div class="code">&amp;#xf0178;</div>
                    <div class="fontclass">.gouwucheman</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0179;</i>
                    <div class="name">购物车空</div>
                    <div class="code">&amp;#xf0179;</div>
                    <div class="fontclass">.gouwuchekong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01b9;</i>
                    <div class="name">放大</div>
                    <div class="code">&amp;#xf01b9;</div>
                    <div class="fontclass">.fangda</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01b8;</i>
                    <div class="name">缩小</div>
                    <div class="code">&amp;#xf01b8;</div>
                    <div class="fontclass">.suoxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01cb;</i>
                    <div class="name">播放</div>
                    <div class="code">&amp;#xf01cb;</div>
                    <div class="fontclass">.bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01ef;</i>
                    <div class="name">电话</div>
                    <div class="code">&amp;#xf01ef;</div>
                    <div class="fontclass">.dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01ee;</i>
                    <div class="name">html5</div>
                    <div class="code">&amp;#xf01ee;</div>
                    <div class="fontclass">.html5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf02a9;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xf02a9;</div>
                    <div class="fontclass">.xiangxia1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf02aa;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xf02aa;</div>
                    <div class="fontclass">.xiangshang2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf02af;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xf02af;</div>
                    <div class="fontclass">.xiangyou2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf02ef;</i>
                    <div class="name">排序</div>
                    <div class="code">&amp;#xf02ef;</div>
                    <div class="fontclass">.paixu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf02ed;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xf02ed;</div>
                    <div class="fontclass">.shezhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0307;</i>
                    <div class="name">定向</div>
                    <div class="code">&amp;#xf0307;</div>
                    <div class="fontclass">.dingxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0292;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xf0292;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0141;</i>
                    <div class="name">其它</div>
                    <div class="code">&amp;#xf0141;</div>
                    <div class="fontclass">.qita</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0153;</i>
                    <div class="name">减</div>
                    <div class="code">&amp;#xf0153;</div>
                    <div class="fontclass">.jian1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01a8;</i>
                    <div class="name">向左</div>
                    <div class="code">&amp;#xf01a8;</div>
                    <div class="fontclass">.xiangzuo2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01a9;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xf01a9;</div>
                    <div class="fontclass">.xiangyou3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01a3;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xf01a3;</div>
                    <div class="fontclass">.xiangshang3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01a6;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xf01a6;</div>
                    <div class="fontclass">.xiangxia2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01c4;</i>
                    <div class="name">通知</div>
                    <div class="code">&amp;#xf01c4;</div>
                    <div class="fontclass">.tongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01c7;</i>
                    <div class="name">qq</div>
                    <div class="code">&amp;#xf01c7;</div>
                    <div class="fontclass">.qq</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf027f;</i>
                    <div class="name">脚印</div>
                    <div class="code">&amp;#xf027f;</div>
                    <div class="fontclass">.jiaoyin</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>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
