joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b2f5b203f8d91e46b0987548d2d70112ffefbdfe
doodle-mini/miniprogram/assets/fonts/demo_index.html
T
R524809 a7f702984d feat: 更新英语描红icon
2026-04-20 17:18:29 +08:00

1454 lines
62 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4942823" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">keyboard-arrow-up</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">start-a</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">draw-o</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">ABC-list</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">font-size</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">two-columns</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">back-rounde</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">keyboard-arrow-down</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">square-half</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">home-o</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">home</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">setting</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">round-star-o</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">plus</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">star</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">minus</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">round-star</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">star-o</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">about-o</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">feedback-o</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">feedback</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">about</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">heart-o</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">heart</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">print</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">family</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">search-plus</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">search</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">clock-o</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">clock</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">search-minus</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">setting-o</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">line-share</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">arrow-up</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">arrow-right</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">arrow-down</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">arrow-left</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">success</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe92b;</span>
<div class="name">moon</div>
<div class="code-name">&amp;#xe92b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ea;</span>
<div class="name">evernote</div>
<div class="code-name">&amp;#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e3;</span>
<div class="name">refresh2</div>
<div class="code-name">&amp;#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe712;</span>
<div class="name">sun</div>
<div class="code-name">&amp;#xe712;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c2;</span>
<div class="name">refresh</div>
<div class="code-name">&amp;#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">clear</div>
<div class="code-name">&amp;#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">guide</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71d;</span>
<div class="name">dustbin-o</div>
<div class="code-name">&amp;#xe71d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe72a;</span>
<div class="name">editor-o</div>
<div class="code-name">&amp;#xe72a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe704;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">download</div>
<div class="code-name">&amp;#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73b;</span>
<div class="name">error-o</div>
<div class="code-name">&amp;#xe73b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70d;</span>
<div class="name">close-bold</div>
<div class="code-name">&amp;#xe70d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73c;</span>
<div class="name">translate</div>
<div class="code-name">&amp;#xe73c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe729;</span>
<div class="name">share-o</div>
<div class="code-name">&amp;#xe729;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe728;</span>
<div class="name">share</div>
<div class="code-name">&amp;#xe728;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe727;</span>
<div class="name">wechat-o</div>
<div class="code-name">&amp;#xe727;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src:
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAACOsAAsAAAAANwwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA8FUwCY21hcAAAAYgAAAG7AAAE3HiogaBnbHlmAAADRAAAHJgAACoMyI56Q2hlYWQAAB/cAAAALwAAADYvyn+QaGhlYQAAIAwAAAAeAAAAJAhyBS5obXR4AAAgLAAAABQAAADg4XUAAGxvY2EAACBAAAAAcgAAAHIdoROqbWF4cAAAILQAAAAfAAAAIAFLAKZuYW1lAAAg1AAAAUAAAAJnEKM8sHBvc3QAACIUAAABlwAAAnycSDNieJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhZ5zAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjG81GZu+N/AwMB8hwFIMjCiKGICAGoFDJV4nN3UV05bURjE8b/NhRQwxYCpppjiRhopRDKLYBl5irIoVsJWkOYINkHmMHlE4j3X+lm+V0e3fTMG5oE5u7AG2j9p+RetSx9tPR+f4/3z8aa14P0BR17XFprXVDPd6E73eixN6ZRu6ZV+mZTrh+nTE3hNW4svrhmWWda8srV8vQEjfr34+c0fr/ngFSeccsax722FVdboss4Gm/TYYpsddtljnz4HHLLEMh0/0yJtP1vjN7DAG97yzle74JwpY1/xM1+Z8IWPXPGD73zikm8MfUsLr971/78t1a/27b+9qzrr8DQ89fBc0Fx4QqgJz8rpCU8NLYbnh5bCk0Sd8EzRcni6aCU8Z7QanjhaC88edcMpQOvhPKCNcDLQZjgjqBdOC9oK5wZthxOEdsJZQrvhVKG9cL7QfjhpqB/OHDqI+uZ0GNRnOgrqsx5H7ZsGQX03J0F9r6dRO6uzqL3VedQ+axjONRqFE47G4ayjSTj1aBq175pF/T/QTVDPfRfUtfdBPd9juDGUJtwdSifcIko33CdKL9wsSj/cMcowapbKKNw7yjjcQMok3EXKLNxKynW4nzxMg+Ff2w2woQB4nJV6C5Acx3nedPe837OzM7Pv1+zO3u3d7d7t3u7e4e4Wh9cBBA64A6l7AAQhUCBFihRfEm2CkkCe9WIkp2wplKmHTYolK4oC0K5IoRKGUWyWSkokF0W7ZIJ0kSFDKYhsFq1QKSZypOQW+Xtm7wCQKrmyOzvT7+75++/v//7uZRADH9LG+xmTYZDAl4LOTtRp5pEb50tVzLxo1gvI6Jt1s28W6ib6zovwMPqW1TfHClBFDOufxy8whBEYhTEYm/GYNJOH1opO+OUGT6tl+Qh+pOX4Dvwwg873V+ivv0JW/+85+ltdRczq6jn6wRsrqyv0wiuXGMTAbwWitDueYS5dIt8kAozZZRLQW515F8O02qjT7XgujN1zBV5A1RZqIAlVhapHmp32ZDWoCjnkxHk/4HMIdYNq0J7sdHuoPRn4JV6ARBprNeHdob4ORd3zuKmZhYKpzGq8rvPa5l+emkV/nMv3T+KV2fX83KeXHnLcws5E5nArlkSJ/sZ8zNCqvZNzJxfHF+Mqm/ZVo5weqVX2rhRNq/wtPKEJGlwzKm1V23xuBX0ln+vfgF6Z+4PcXF9aWqimc7GekjISQyjlJ9HCvKBIsppKD+2uzewrJTXfZVVDSxUS+SCnDzn+OCOBPH5K3keWQPIpZpTpMYvMjcytzD3MP2MYuw6zaiA+h3toJ2p58MQN5Pmtko5zqFVs9jDIJfDRO+J83KVRFMYmOzOomcM8CFDHI6gUtLutZicYQd4k3BwIC5Oh2jQ7tHpJ4OOeC6ld+AYl6L8U9PmMRNBxgkRdV7B5s4kVXZMQe09m6heyJWPRVtEGDbC8Loj9jV+XZrquiTZ0h9NUQdw8bsjzsbwrCpKhc14xdlg2WoEBn+CwobRainFLsWdiNWvwnFC4s5DJFLqZUUPgeCOrYrNXJHM6qxD2WUFXeCzx5TIvYV7RhY/OS6Yd1yQzLuk8ucRcHXMLXiyd4Ag6rBhGulTQtHI1bxryRiq5oRgt4xfl4Tg2HUUWq1X/dn/IsUVZcUwcHwbdZbfXS5bZwRxkDsM6abqOFedBalVQuzqq1hFoIVye6/UQ5Hq2C8oIydWggXwIQinctSGPKi0oexMKU6kj0iIbsWQ2UDCuNnI7Gkac1+ShdHGxrGucs/mTRCD8O17iPE2O8RjN/NcZ1lGVuMaSp4UAfac4QbBpeT0vw7ta3OzvXf0TtJGMXWLsJGcQNoFQvJqCtrJ1w+Z0TlR0tJL2Nv/cNBUNIUUm7FNPqSZCkunIeJeX7q+OFdyqbtveQtoSBdTtv0XfH9bu7xDEWIzD1GDlMnaoW6EMqGLBokS+1bqcCkuRZsALhhkbTf+834SbXdJsxJw/fz5MSMZSonjeT7qEpuGwyOY5v2kaiRxe3TyHVwcpyRiHk25OpIkgfBjPG/gnxGViDCMhV4eOUAgLqJNDcQF9Hu0wUX7U7D+V0jR0wBzLgwL2/6MxCs/9ybJZgEQL50eNsK0BltoMU4G5CnoI0KhLG4IVIPDoDVnsQ2sN48UXzUbe7Iuy819YSKrnEU1C+TFIYwVoRgjbOoV/DFJKgq4UmQozzIxRVC3xIBTQDbo6O11rkioOxdo5uFGsRcX2MLaGcbtICpvPpCuWIOsmnk9VkGdLcn8zxNKrfpvP0Ceep2H8WiW9+UwyJnKin8J74kWBoP4z8xvz88/Mo435zWfmAemZS8+TPyEj8J7jDEAyskKooEhqTcKKl1AOCX6pjqgUmx7EdDQChXTsFyG13YXyAMgWSHlrknOohyEhVHKYbFByxCRj6JwG4GfyfP9i/6JmrIxojsxJaEMtAyxInOxoI3a5keqv+jOlc8ly0jZYdtVKqk7Clg11KBGzV8fKbhIm7IKVFHhbRiOOxmKU6V/k3CkjkYS2NK2/ISUTxiUm2SjHoaHzl5hYEvpmjARBVP3VuIJUW0FMIeMVBD4bm2QYDDK4ADIYYxqwjhlp+x35SF2jaQmtimP5oVZbA4nQhW3Tl/ZBADsRoO7gVXJpJ6lqtaGSm7whM2lna4XpmLP1ylJSFW0rec4xOZLbGnFhKqYDEI1UdpoyKLVf71/Ip4oBHTp9NYnjSF9IxvoX0IiZRFQ/6dz9NfksjNtmHmB+F+auFBm6FgA/2EE6AVy1U+1SGjCHJkGJG9QCAIRHgaofCL6OqD6HMA8BuEDNeY++eZ5qfA7BrO6kocHVbXV2YtpiF7QWmiY0HHAAdpM9lMNxHWFmNG+YvVGnmjXTCdnT0NmeJPVYgjBCqSZPMK9yh2uTBiKCRg4eIqJGjFbtMCexMo+aSURYkVbgCcui1ATHyRwmZKnWgsERjucPHYIoy4pEn6wt0SeNTaQQ4fr3ji2NjS0dOzQycgi9lTeqzkjPzAVOZkLnRfRqu9NpsxzLcYhl2f0zAJsEp317mecUoutYFa+z/TRGWEQz+4kU42l5TpRlcmCah9FnoKgEg8JIB5XGWFCO2n4GwQez7A5aYwSNHj5+ZBSPHTq2OBbq1avkj4nPLDAPwew0sFAKsQNmyac3ym5gdfFC3O12oi9YiFaOWgu306ZmIDK6EKKYSRdUF+YgnidQEYfqGXIkHVNzErYN1gRqhIXB8HS6zUHD0KKHJZARB8M1xXJCrCXWj8HbmHO74oZY1EV+7QgrKBobA3gHG3H0XbzI6RnRiB/exWLh+JpIbEPW2SLb8WEeWeHkCSevysbCkkDAKmOrNBS7/jpB4K+7PjZUsrDhE2FpwZC1nHPiJDA4f8rI2VVNZPHLiFCRZY1rjgCem0gkBpi3RuL0+0DHx3YQFiYGg3jJzCgMt7x6baJhTM2zAjJhwhQhrtxy9sY7YQgYFMoi6fKQsXcHJ65fX3EqLpYacywicw0JuxXnzttEbsdeoxqkiIU57v03pUXgBKIQ8c7/Qz5BOMYHltVmjjE3A8di7GIzx8d1nmIbP9njvVIAVAg4ZHErQKGPh0wAuB4PhYVSqPgezSPRIoAJjPNP4K9zkiTyPAuy4nlRkrjN9benxDOZoWwWfy6ezQ5lMv0fYJYTIF2GYgLH4rdFJ7SEBlc8nY5vh9A3fnOd92Shg60LfeKdQ3jHMDuam4Ylm61mNteR5qVdDWWqWWrCIpt4HmwFsNSWXa2kESfYlV/uex1N3ncfmnx9X/+XaPQHaZTu/7f0D/rPf3m7zir6ZuiTgFQxZeUgZQRAQfzNp1VXg0lOGnhB93TdQ8tKPKFqlualPC2qf+ll8hVSgDliUD1kSQIfrh6q0dQ3AKrfDZ0F+o3IE9X4kOzSZYPnJX/Il6Z8opw8kSlhh2qsb5BCOwn6KhJ87Ylku0AMn4LMgoNLmRMnFeLjX8Xi8dhNd0jE5Gpth6rYbXdmR1W10QOYRr2Gqo5m77yNFfCOvU67xplEuiO0Jdsyosyh61W7dGV6ZFte6EOf/KR/3x/1en9031evFN03j177pffqn/2Mfkv/W28XY8i1LoTtxoE7NJlOiPZ8SM0paYQ3pj5RQChOBJMhlNCckHERl4/UVwCXDTP3nr5xamZm6sbTf7cVuPeGpcN1+BxeenorMITy9Vyunju1ukpGriocBjaZq0qHAcx4eVrp85cYhoPxvgm2yQKvUgVPJg+sB9hxZzKgvki11fbBrHZAEUKuWC1Wi1bRaluYsTyv5Hne8nL/C40i3ig2GsXNvyrhazc3kEhzSt7jP99cx39FM/qF4jhaRq9tvjWGXovsYdSnBr5kimG8q7roXtn73Zcb//l2l+YVzZ7Z6ixq9y/JvwXZU7+YesN+GwRptUikjd4AsLegOsAjq/AZWXl0dn8hr6l3r6285/TTu+dTqerc7PpxzKz0wTVGG7tm97/7hhtPf31iQhAOLx48eeP3lg6PjkV85H+QJ4D8ZigfqQjVsNX2ZOjPei36oL4v7duGIdSRH+jYCTUhjyK4b0/WAQpY7sHmcqVW3VubWLWWrdWJ2t5qrbLcnO3eXC7f3G2s7fbrQ2udT/d6n+6sDdX93WsAwR9sLu/Ys6O2rzo9Ojpd3VeDyHITlxu1WgOVd681Fo/sW586OwXX+r4ji9BGebBOozEDVHDbA8aAi+D4tDo5HI1XwMx2X43ue/0rR2Fc0SQaH76qO+ayv0XojKiAJwWKKO2i5Q7mlbQpaW4DFYswhtIywvRBnsABy8nknv45dL7PnA9ijSRe7Rw8j1fO929HNKuc7L9x/vzKecR0KjH7YOfS1t7E8+QbMO8KUwa+Ps1cx9xO1x316mAyKOJTbgi9hY4ddaYdN3R8CCw3agVKFVq4vVUYyONc5H67WURdpIGfVGmXgm77coa/1QzjJ1UdNRdarSMjfiDWd9TF4yzRYkoD2OxILPkzO2gHQbv/cz+las39zeb9TizZ8jeoD+UkYyuxJJqHXyW9kq4ADQ7r4I2kmrfKE6i10IRVNVLbG78zVSik+m/JjiVdAFmhp+12gCrt4I2rSgKJv0AdLygS0WpwKDdSQZACPxWuJDPgpJvkY4DXebCrUyAtT6i2qzqKVIJCMxjLaMF4Li94frOHJgHXdQR+Q9d3/DYsrnbLaeEvX9x7UZ38+O5s+rpmRnPnDjQ+MLPrrpInC5hUKurPpk52uyfvprdz19evhwtVoEZZHfV1TvEPjjTX/mW7nJGkg9NBLZObev+IOigOt39Dy1/PRGvtp+RLJMUYwAQYDpi/H2GlA/QfVUJ3nLoyfsStYejkeP/HlWONjzzxxP9+IpdF+c3/uTqTy6PZzOLwymw2P5s9lEL5bA5yn/hI41il/+NLV2TBM5cfyOkCeQp0K8W0QLOYSnOLArYjz6ka6CRHwLnwtgwdHdr2unJArgCXq4cqedtM2YWh+JQ/Mj7/sd9aH+G6pz60G8Cnkg50J2+kd3z3boD86R2773v0tmcKr40MxTOWXQz2HYbKvUTGsNWZmz7ysfuvnyDMrtlgbOc173tvc+zGu0LDsPLomV0vvPaByU+iSFY/It+CMbuATAzdZYI580LzG+00VQO7arUcDyAO6u06s7T3c/ubY8u3Fl2jOHfryQOvzj9DRnadefTco2cKWcE10uOf/9bxuc57u63Nr/wTxLz6wW39qYb6M06xttrbVh4qg23lAQfE8bqViH9FhKJKtyK//JtU4OLevnKF4ly8iCq/QcfKoFCXleZifcsOf5GMMsvMx5jPMF8MWQn1sHrA72GIQMKBitfBfyyBM6UjcLQGTpUbp/FwRxM8Ji/0rfJgEneGRB3SqSNFeTzMbBBiJVT0QReo11ANjUsDdUM7Qzf/qOuwE4WOmluJlk+0lMgWVSVHJSJi3BVZlqyKliwvmxkuxbn6eT3BJriMeZ2a4FcFInVkuSNjYVVxBP6oosSFFGur39RdNk1iqiguayl+FZii8CG/28xmLSNlyrx5h6Htq6lqs1uKi6Luljotf4+ni+Ydppp2d2SbXd8QwR//h8aRev3IDfRWLzcpRKGb5IxKSE/yVP5hgyPA4U3ziGaa2hHTJBZSlIfVjNxTC2oPCj5sA9O3MCvEjygmQlBINcIURX3YtGSBq56UeZGVjIRhNcaHJhBW3h242fx8MjgpC4lMzB0fLyVsg1feXbXc4v6f1pdOLNXD2yWmudCEa4tfvUnmgTvsYPYwi8wKYAGQ1fZkt6KjKBCifCVoVycHG8ugjKWgyrleXIgLXJgdJla3iMY230GDZxN/PzFaipH+31q1BgR8a7RRs1ASIwglmgtRvP+31LlBSVrG8mlOxFD6E9ET60pITsxYaTTBu181w0DTt2Km+VVB0Glo4abtqMELtIjl06TliNagxOBZVsLngKcniMF4oNGULl4+OmhQM1UK2haa1Msp7Q2tov29lqpoj6fKKfSilirrb2jaGzTr8c3vxVKpGJ4ZtPdb+KGwvSDaT44bg5ZDb6pVxEfVREl7RVVf0UoJ9ZHN161EwsIenldLSZqmvqImfPWRRCkxaE/AL9H2KtRPDhtrDJq2QsTGw4/Qhl5RaaPJkvp5qPnFR67qA3u0D+aK8YHZCqcHmnPibrjrPdlARTp1fhH9RVhb4bmt6rFEIrb5+tYQLcHkX6FFwkEyA/7Pfo7wzAjgFxN6+9tfIwKyboRf3hbgD74O+7AkJdJBMNGYnrx5PmhnuLHZe770e046XSkO5RTdSqT9yth4Z8euPYcO4z9liWI4mdJIc+7u9fbaqHhg55mjD1lOqlJrTRlxN5cPKqPVenWsPJRfp7gK7/s1EgB215kFGJmOcrjTpRvQW1YF1LriOQLdEKKw00Dt7uCcAXDq16ejf50m4yfu/+iMdXr/wWtPHV1ujFf8s+jebNbOsKIvcJlYLhfLcIIvspnvXA7alwvgF2c+ev+JcZI+ctavjDeWj5669uD+08bbi4XtPPn2JsMCW7zj2+T9xAWv66PMZ6nkR0IHyecnuq1xR0fAq+wrebQD9kIIHcnwcIPulw12xehX2NqmGSRGOZMdelIyB4ANTG1wOpVHAwsdOaP+1mz7vM1TjO7SCnXMo7tl91hN4WSEnkMs+XNTlVgxO5HVbEkTsMGrSLWz5WYlxxlEVmwnYzlYlFQrLsb4bqsTyKqkS0QGDz8T/0whR0pJUzQ5mU0bAvlE0S45acHgOfDiWSQm3UKq4Hn2+DUEY3mvhAn2ymncliAbPY9Ee/jd7uYXFUNR7TgMwdYkXUSEkwpKvFUudDRC6AaMpMTcfLrgFVUwIDG7KoO6lY3xlG4mSyRbeCSeoTAlJFXF4wQlnhxePnbgmu540ButJOOyAE7yX4ssrADM8kSPE22wPi79kvw2EZgcsxNmCfz2ZkSFYV52osAHS+b4VBW7nZZrt+LCQEMFvlqKuDPMnIFgyuiiwT9Z4zCRhTcRXjt4dPHsNTdmM7fu2bd45g9vzGZv2bOwePbm7QIr+1YP9+aCCj6/xhHhdQEmgiNrEwc/cvjwvj23ZrKk/7uLC3tuyWYPXZG/Ml4u7e4x4bnck+SHZBE8jyRTZWaZA8y7mPcw9zAPUO4WsvaI3FdDZKpjip+cB04BZQM97KLL/vhlH52jdpoy/chR3Q5TlqPj8NgBcxFxqIebrs2r+sKMGoslYrGLojgiJSwk1aQkjtckZCWkEY5lFdPov7G4a74SBJX5XV/YCvRfgmrqLL2RE9vBzQ8OqvBhA/h9klTjDVMBLxIa73836mp0UBpuN0lJadDXdv9RBUyu6i8M/IrW3rpQ9YqmoZ60PV7o/IHLXYT68nPyGWKCB3YQbDI90o7wir5/KAu6Qx3udg4sTAD+FuVfVISUflFLlqM7261wBrKUKAJpxLKClfaDJ44sjtXdvLtw//4H2wp28spZTTur5NH4FSmqCinOdnHZisdkoublRn1scel6lZ5kqvvP7G/IeQ/L9yhF5W4Fo+V3JHnbNeSYLMcu+7S3wvsRpsLUqL+PWm0f/J9ongXbpZuRQdeuo0j9B26i3Qq9XRL6Sls/9N0zZ558MulnvRpbTm8+nS6zNS/rJ5/0k2eS/sbk5tdxuW+O3DV7HL534RNnzkCGWyL9l9PDw2lUISUXysHl9//9mTOz/efPhJ+tfTz8Ov4lzAODIsluuSVY6ER7zg0Eq7WOKKH18I9UWUmqXzPGZSFuFZM7ivpYqWJaqjZuHuKSSZm/lUvo+NMQlLhrhj9w6/rhXisYT/CF9o4DR4/fdGvt65qspNQ3FRn88HA/6VfkA2BX88wweEzz4Wmr36Yn1iU+CzoB9GpmcHjVaVstar8rWx61T33qIqUwRUThmLIxkK7bujJC3vVnw9nHM7U/o7rXrGXQU9nhJoT7Czz7OMc9ieY5rn+A5dGz/b+I1sIT0QM/sDs7PJzdDeHNfqZWy2AMwd0cfHZvfoele6v9/t0x9fu04atuEe/8FXmIyIwCbzbENEM0iUY7wAFwQ6kHEeyMDpzcMAoCR1UBKAQ91SmRW8MFPE7v+Au6YxhO//b8yO9ZCW5YSaMvONNT/7z/DZNP35CKoUU1v5I3DN0Y7kSLEf8r3Z2apjWkApu0PlWhNQzjU1DDXY/zNjr0GK1R03VjwJveg3/CpOlJGSVOgoQoufUkRBluVwoZVBWPo4ripOX+S/2X5LSjoEr/b2S7AGVRIBVsGW2ggKb3X0ZDMi33N7ScLUG5lyU7LQ9sxf8ij+NfgLc5CXIJpymUzBUzWIymkHObOwc0zqJ5jlUNB0U2NJvnNlc53k7Zo3l8Lj9q90+IOfEFyU7Kj9kp5zEpZUuv2doGx/MclIZQbmwsB6GuJF2gmY+h79Pk/tRjkp2SIq4R7RnQvdiF/5+dWJsOMBxZHsxanA7aiwgn1MLMXadu6ExNdW449epW4K6T1y41xscbS9d+eytQA7A8dUpKxOjdyoinTokZS7rplERSV1UNA5viVXXDAPp7iVaNRc1YtAHA8JOnpNT2fj1+4R+d31mkAcfW+m/139KACyMI0TiCbxjfiJ79t359ucH8XiSPkxJzJz17qVRJnap2RLW6kZtLidkIogKqh86zH/2VBYqFPM2fDIC/hZL3opOBiM6FhDrkZDPAWuOU2Xtu5DbTzLYbDypdjzzW+AibSAoHtPLY0HRVnRxyPNTV46VnCXGJm1KJ+0M9DuZiZWzBKqYNk0cOJKpGPFMIxvxCimg8zyckFhl37RvtNcaHeSvVYGVBTQjBDwOaY2Hcf/PANdptyJVFUf4Xmmk72ZQ2CbwD22ZSEIV5VeU9bT6WNx6GTpqZIUNTBVfjspXyRDmbcS0DsmMcEndOFYvJuDV7OxaxbBFB0Y4ds1g+wWL2ga99jdna//5TvAk4ss58ECRKz+d7eAYQme5AeoNNCD5E6XZIasM9igofsqzofLEXcrLwUNcPwvRwxyVM706GGxMVamtzyIH2oFzElumJOXA3tC6rGF/z4QPDLFFtR3pwPcbzsfUHJccGnx/z879dKHM2eokI/HT12WeHprlEgpse+vinOIFySf73H5pbExMJcW3uRz+aWxNkLLNxl+vvG3voQF42MEGn9/P8/tP0BNFSFzrXz/wdseTTB+5f2F0Bm4r4ox9OiraY+tBRHkkxpTI8hOTp6XlJnOnsGZriPI+bGnruuaFp1uAEtsTJnCGszr5wYW6VTyT41bnVdSAh8Ti7NN1WWGwq0w2ycJMgnl7AjbpqNVcjnX2TfBX/A3DANVgudNMy3MEJD8fjXhQNUbkabvwIlNEKXIgDrvNOQbt0At4haLQoGgKHy6UP79XBWcB8Sj27FmPZ2NpZI4cIJs199y1g9N+5WIIFGQmRuCLBPfT7fChL7lMf3xLvs89Wp6kZEYBxEW5+ZlbGo2MBx6micPRMitO45P1HJdOqJJt7713YL7BmApjZ2tqWWC68MLsqGCCtEitwBjtNRTgQ5p7t/7d8Fn8bUHoO8PAkcx+zwfxT+m+gbnRW4bmhXxSu2MF/FCgRCw/tqB558ZDhA67X0fYxTWsrwNEN0VKIsDlojm6BzdG/B1abXvgXQAEsAd0x8+leO/0fihcfnHdBgP5Ro4dz6O5q5XcOzty2bIM4LYcjyamZA/Pt1mzVVyZFvlAiLOLw6NAR1amOfdtw3ZzjfM9wHHig/1As3PHAHYUiPHaWS/OqU7Lsn02ODk8UMkogCPkCDU8MjwqxdAyuL8U02RSIboM+Prd7qr1z6EAdWAO0P1kopZMrzer+tKgWQJnBHSPEcbDssIbWLq4vO7mw4/D+n6fGx9rNkbF7GvW2HGNNtZYt+P/JcfYNFaZdUXVkQkQnvrC0z3Fu02KxFFgoLSbHbJ0IJvP/ACxWrVt4nGNgZGBgAOLwxvMS8fw2Xxm4WRhA4Bn33BMI+v8WlinM/kAuBwMTSBQAKa4KwwB4nGNgZGBgbvjfwBDDWsoABCxTGBgZUIEFAF3BA6sAAHicY2FgYGAZhJi1lDrmAACFWwFXAAAAAAAgAFoA4gG4AjgCgAKmAswDGgOcA/gEyAWWBjAGSgZqBsIG7gdGB4AHrAfkCD4IcAioCUIJmgnWCjAKYgqyC54MHgxGDG4MlgzCDQ4Nfg5SDq4Pag/aEC4QbhDaETIRaBG0EiISWBMAE7IUPBUGAAB4nGNgZGBgsGCYxcDJAAJMQMwFhAwM/8F8BgAeCwHyAHichZE9bsJAEIWfwZAElChKpDRpVikoEsn8lEipUKCnoAez5ke211ovSNQ5TY6QE+QI6Whzikh52EMDRbza2W/evpkdyQDusIeH8rvnLtnDJbOSK7jAo3CV+pOwT34WrqGJnnCd+qtwAy94E26yY8YOnn/FrIV3YQ+3+BCu4AafwlXqX8I++Vu4hgf8CNep/wo3MPGuhZtoeeHA6qnTczXbqVVo0sik7niO9WITT+2pPNE2X5lUdYPOURrpVNtjm3y76DkXqciaRA15q+PYqMyatQ5dsHQu67fbkehBaBIMYKExhWOcQ2GGHeMKIQxSREV0Z/mY7gU2iFlp/3VP6LbIqR9yhS4CdM5cI7rSwnk6TY4tX+tRdXQrbsuahDSUWs1JYrLiDzzcramE1AMsi6oMfbS5ohN/UMyQ/AHYk29XeJxtkNly1DAQRX2T8TL2AAlh3wKEHcQStvAIfInGbo9VkdWDFqbC1yPbk0oVhV76qlvqc7uTnWQ6ZfL/c4Id7GKGFBlyFJijRIUFLuEyrmAP+7iKA1zDddzATdzCbdzBXdzDfTzAIR7iER7jCE/wFM/wHC/wEq/wGm8g8Bbv8B4fcIyP+ITP+IKvOMG3ZP+UzpYsbSOktbwRYZ07L60XMmus3Aguvv/4KbRyft6y8cKpP1T5DYuadeiNq5ayPhWWg2no4J9eDW9M5X4FaUl0UrdZxz0Jng0hd+S9MqvF+FUMzFhZ6+Bmg057ZYIrL4rZ9CKXSw5ecNkSNSOai3OZjrW8o8E+p2NM11YZn7WyV/qscjFVd2KgZJPOa81Dk3SMi+2DET7fOowwrQwJ18U5ivMtVZOwatX58mLcrdTU+tyFuibnZj2zKeg3WcOeCkutJdcd77pg8u0l0iM4XQXV0LwJzi+ViYNRozzbyZyjYuivWTY5RUZMl2NaLFk3c2+lcVr6uNfBZvwz2d1Q3cm4jST5C1QxtfAA') format('woff'),
url('iconfont.ttf?t=1776676168680') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-keyboard-arrow-up"></span>
<div class="name">
keyboard-arrow-up
</div>
<div class="code-name">.icon-keyboard-arrow-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-start-a"></span>
<div class="name">
start-a
</div>
<div class="code-name">.icon-start-a
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-draw-o"></span>
<div class="name">
draw-o
</div>
<div class="code-name">.icon-draw-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ABC-list"></span>
<div class="name">
ABC-list
</div>
<div class="code-name">.icon-ABC-list
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-font-size"></span>
<div class="name">
font-size
</div>
<div class="code-name">.icon-font-size
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-two-columns"></span>
<div class="name">
two-columns
</div>
<div class="code-name">.icon-two-columns
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-back-rounde"></span>
<div class="name">
back-rounde
</div>
<div class="code-name">.icon-back-rounde
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keyboard-arrow-down"></span>
<div class="name">
keyboard-arrow-down
</div>
<div class="code-name">.icon-keyboard-arrow-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-square-half"></span>
<div class="name">
square-half
</div>
<div class="code-name">.icon-square-half
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home-o"></span>
<div class="name">
home-o
</div>
<div class="code-name">.icon-home-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home"></span>
<div class="name">
home
</div>
<div class="code-name">.icon-home
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-setting"></span>
<div class="name">
setting
</div>
<div class="code-name">.icon-setting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-round-star-o"></span>
<div class="name">
round-star-o
</div>
<div class="code-name">.icon-round-star-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-plus"></span>
<div class="name">
plus
</div>
<div class="code-name">.icon-plus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-star"></span>
<div class="name">
star
</div>
<div class="code-name">.icon-star
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-minus"></span>
<div class="name">
minus
</div>
<div class="code-name">.icon-minus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-round-star"></span>
<div class="name">
round-star
</div>
<div class="code-name">.icon-round-star
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-star-o"></span>
<div class="name">
star-o
</div>
<div class="code-name">.icon-star-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-about-o"></span>
<div class="name">
about-o
</div>
<div class="code-name">.icon-about-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feedback-o"></span>
<div class="name">
feedback-o
</div>
<div class="code-name">.icon-feedback-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feedback"></span>
<div class="name">
feedback
</div>
<div class="code-name">.icon-feedback
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-about"></span>
<div class="name">
about
</div>
<div class="code-name">.icon-about
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-heart-o"></span>
<div class="name">
heart-o
</div>
<div class="code-name">.icon-heart-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-heart"></span>
<div class="name">
heart
</div>
<div class="code-name">.icon-heart
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-print"></span>
<div class="name">
print
</div>
<div class="code-name">.icon-print
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-family"></span>
<div class="name">
family
</div>
<div class="code-name">.icon-family
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search-plus"></span>
<div class="name">
search-plus
</div>
<div class="code-name">.icon-search-plus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search"></span>
<div class="name">
search
</div>
<div class="code-name">.icon-search
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clock-o"></span>
<div class="name">
clock-o
</div>
<div class="code-name">.icon-clock-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clock"></span>
<div class="name">
clock
</div>
<div class="code-name">.icon-clock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search-minus"></span>
<div class="name">
search-minus
</div>
<div class="code-name">.icon-search-minus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-setting-o"></span>
<div class="name">
setting-o
</div>
<div class="code-name">.icon-setting-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-line-share"></span>
<div class="name">
line-share
</div>
<div class="code-name">.icon-line-share
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up"></span>
<div class="name">
arrow-up
</div>
<div class="code-name">.icon-arrow-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right"></span>
<div class="name">
arrow-right
</div>
<div class="code-name">.icon-arrow-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-down"></span>
<div class="name">
arrow-down
</div>
<div class="code-name">.icon-arrow-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left"></span>
<div class="name">
arrow-left
</div>
<div class="code-name">.icon-arrow-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-success"></span>
<div class="name">
success
</div>
<div class="code-name">.icon-success
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-moon"></span>
<div class="name">
moon
</div>
<div class="code-name">.icon-moon
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-evernote"></span>
<div class="name">
evernote
</div>
<div class="code-name">.icon-evernote
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh2"></span>
<div class="name">
refresh2
</div>
<div class="code-name">.icon-refresh2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sun"></span>
<div class="name">
sun
</div>
<div class="code-name">.icon-sun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh"></span>
<div class="name">
refresh
</div>
<div class="code-name">.icon-refresh
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clear"></span>
<div class="name">
clear
</div>
<div class="code-name">.icon-clear
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guide"></span>
<div class="name">
guide
</div>
<div class="code-name">.icon-guide
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dustbin-o"></span>
<div class="name">
dustbin-o
</div>
<div class="code-name">.icon-dustbin-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-editor-o"></span>
<div class="name">
editor-o
</div>
<div class="code-name">.icon-editor-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-download"></span>
<div class="name">
download
</div>
<div class="code-name">.icon-download
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-error-o"></span>
<div class="name">
error-o
</div>
<div class="code-name">.icon-error-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close-bold"></span>
<div class="name">
close-bold
</div>
<div class="code-name">.icon-close-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-translate"></span>
<div class="name">
translate
</div>
<div class="code-name">.icon-translate
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share-o"></span>
<div class="name">
share-o
</div>
<div class="code-name">.icon-share-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share"></span>
<div class="name">
share
</div>
<div class="code-name">.icon-share
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wechat-o"></span>
<div class="name">
wechat-o
</div>
<div class="code-name">.icon-wechat-o
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-arrow-up"></use>
</svg>
<div class="name">keyboard-arrow-up</div>
<div class="code-name">#icon-keyboard-arrow-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-start-a"></use>
</svg>
<div class="name">start-a</div>
<div class="code-name">#icon-start-a</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-draw-o"></use>
</svg>
<div class="name">draw-o</div>
<div class="code-name">#icon-draw-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ABC-list"></use>
</svg>
<div class="name">ABC-list</div>
<div class="code-name">#icon-ABC-list</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-font-size"></use>
</svg>
<div class="name">font-size</div>
<div class="code-name">#icon-font-size</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-two-columns"></use>
</svg>
<div class="name">two-columns</div>
<div class="code-name">#icon-two-columns</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-back-rounde"></use>
</svg>
<div class="name">back-rounde</div>
<div class="code-name">#icon-back-rounde</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-arrow-down"></use>
</svg>
<div class="name">keyboard-arrow-down</div>
<div class="code-name">#icon-keyboard-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-square-half"></use>
</svg>
<div class="name">square-half</div>
<div class="code-name">#icon-square-half</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home-o"></use>
</svg>
<div class="name">home-o</div>
<div class="code-name">#icon-home-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<div class="name">home</div>
<div class="code-name">#icon-home</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-setting"></use>
</svg>
<div class="name">setting</div>
<div class="code-name">#icon-setting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-round-star-o"></use>
</svg>
<div class="name">round-star-o</div>
<div class="code-name">#icon-round-star-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg>
<div class="name">plus</div>
<div class="code-name">#icon-plus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-star"></use>
</svg>
<div class="name">star</div>
<div class="code-name">#icon-star</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg>
<div class="name">minus</div>
<div class="code-name">#icon-minus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-round-star"></use>
</svg>
<div class="name">round-star</div>
<div class="code-name">#icon-round-star</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-star-o"></use>
</svg>
<div class="name">star-o</div>
<div class="code-name">#icon-star-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-about-o"></use>
</svg>
<div class="name">about-o</div>
<div class="code-name">#icon-about-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feedback-o"></use>
</svg>
<div class="name">feedback-o</div>
<div class="code-name">#icon-feedback-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feedback"></use>
</svg>
<div class="name">feedback</div>
<div class="code-name">#icon-feedback</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-about"></use>
</svg>
<div class="name">about</div>
<div class="code-name">#icon-about</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-heart-o"></use>
</svg>
<div class="name">heart-o</div>
<div class="code-name">#icon-heart-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-heart"></use>
</svg>
<div class="name">heart</div>
<div class="code-name">#icon-heart</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-print"></use>
</svg>
<div class="name">print</div>
<div class="code-name">#icon-print</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-family"></use>
</svg>
<div class="name">family</div>
<div class="code-name">#icon-family</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search-plus"></use>
</svg>
<div class="name">search-plus</div>
<div class="code-name">#icon-search-plus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search"></use>
</svg>
<div class="name">search</div>
<div class="code-name">#icon-search</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clock-o"></use>
</svg>
<div class="name">clock-o</div>
<div class="code-name">#icon-clock-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clock"></use>
</svg>
<div class="name">clock</div>
<div class="code-name">#icon-clock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search-minus"></use>
</svg>
<div class="name">search-minus</div>
<div class="code-name">#icon-search-minus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-setting-o"></use>
</svg>
<div class="name">setting-o</div>
<div class="code-name">#icon-setting-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-line-share"></use>
</svg>
<div class="name">line-share</div>
<div class="code-name">#icon-line-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-up"></use>
</svg>
<div class="name">arrow-up</div>
<div class="code-name">#icon-arrow-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right"></use>
</svg>
<div class="name">arrow-right</div>
<div class="code-name">#icon-arrow-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-down"></use>
</svg>
<div class="name">arrow-down</div>
<div class="code-name">#icon-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left"></use>
</svg>
<div class="name">arrow-left</div>
<div class="code-name">#icon-arrow-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-success"></use>
</svg>
<div class="name">success</div>
<div class="code-name">#icon-success</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-moon"></use>
</svg>
<div class="name">moon</div>
<div class="code-name">#icon-moon</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-evernote"></use>
</svg>
<div class="name">evernote</div>
<div class="code-name">#icon-evernote</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-refresh2"></use>
</svg>
<div class="name">refresh2</div>
<div class="code-name">#icon-refresh2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sun"></use>
</svg>
<div class="name">sun</div>
<div class="code-name">#icon-sun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="code-name">#icon-refresh</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clear"></use>
</svg>
<div class="name">clear</div>
<div class="code-name">#icon-clear</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guide"></use>
</svg>
<div class="name">guide</div>
<div class="code-name">#icon-guide</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dustbin-o"></use>
</svg>
<div class="name">dustbin-o</div>
<div class="code-name">#icon-dustbin-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-editor-o"></use>
</svg>
<div class="name">editor-o</div>
<div class="code-name">#icon-editor-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-download"></use>
</svg>
<div class="name">download</div>
<div class="code-name">#icon-download</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-error-o"></use>
</svg>
<div class="name">error-o</div>
<div class="code-name">#icon-error-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close-bold"></use>
</svg>
<div class="name">close-bold</div>
<div class="code-name">#icon-close-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-translate"></use>
</svg>
<div class="name">translate</div>
<div class="code-name">#icon-translate</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-share-o"></use>
</svg>
<div class="name">share-o</div>
<div class="code-name">#icon-share-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-share"></use>
</svg>
<div class="name">share</div>
<div class="code-name">#icon-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wechat-o"></use>
</svg>
<div class="name">wechat-o</div>
<div class="code-name">#icon-wechat-o</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink