joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feature-3.5.0
doodle-mini/miniprogram/assets/fonts/demo_index.html
T
R524809 d52339c0fa feat: 开发完成拼音每日一练
2026-05-20 15:33:06 +08:00

1707 lines
72 KiB
HTML
Raw Permalink 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">&#xe635;</span>
<div class="name">abc</div>
<div class="code-name">&amp;#xe635;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">ABC-underline</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">pen-draw</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">more-vert</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">more-horiz</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe632;</span>
<div class="name">iconify-material-symbols_check-rounded</div>
<div class="code-name">&amp;#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">grid</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">grid-o</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">mood-empty</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">loading</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">task-o</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">refresh</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<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">&#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-two</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,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') format('woff'),
url('iconfont.ttf?t=1779261979431') 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-abc"></span>
<div class="name">
abc
</div>
<div class="code-name">.icon-abc
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ABC-underline"></span>
<div class="name">
ABC-underline
</div>
<div class="code-name">.icon-ABC-underline
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pen-draw"></span>
<div class="name">
pen-draw
</div>
<div class="code-name">.icon-pen-draw
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-more-vert"></span>
<div class="name">
more-vert
</div>
<div class="code-name">.icon-more-vert
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-more-horiz"></span>
<div class="name">
more-horiz
</div>
<div class="code-name">.icon-more-horiz
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconify-material-symbols_check-rounded"></span>
<div class="name">
iconify-material-symbols_check-rounded
</div>
<div class="code-name">.icon-iconify-material-symbols_check-rounded
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-grid"></span>
<div class="name">
grid
</div>
<div class="code-name">.icon-grid
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-grid-o"></span>
<div class="name">
grid-o
</div>
<div class="code-name">.icon-grid-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mood-empty"></span>
<div class="name">
mood-empty
</div>
<div class="code-name">.icon-mood-empty
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-loading"></span>
<div class="name">
loading
</div>
<div class="code-name">.icon-loading
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-task-o"></span>
<div class="name">
task-o
</div>
<div class="code-name">.icon-task-o
</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-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-sun"></span>
<div class="name">
sun
</div>
<div class="code-name">.icon-sun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh-two"></span>
<div class="name">
refresh-two
</div>
<div class="code-name">.icon-refresh-two
</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-abc"></use>
</svg>
<div class="name">abc</div>
<div class="code-name">#icon-abc</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ABC-underline"></use>
</svg>
<div class="name">ABC-underline</div>
<div class="code-name">#icon-ABC-underline</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pen-draw"></use>
</svg>
<div class="name">pen-draw</div>
<div class="code-name">#icon-pen-draw</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-more-vert"></use>
</svg>
<div class="name">more-vert</div>
<div class="code-name">#icon-more-vert</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-more-horiz"></use>
</svg>
<div class="name">more-horiz</div>
<div class="code-name">#icon-more-horiz</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconify-material-symbols_check-rounded"></use>
</svg>
<div class="name">iconify-material-symbols_check-rounded</div>
<div class="code-name">#icon-iconify-material-symbols_check-rounded</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-grid"></use>
</svg>
<div class="name">grid</div>
<div class="code-name">#icon-grid</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-grid-o"></use>
</svg>
<div class="name">grid-o</div>
<div class="code-name">#icon-grid-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mood-empty"></use>
</svg>
<div class="name">mood-empty</div>
<div class="code-name">#icon-mood-empty</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-loading"></use>
</svg>
<div class="name">loading</div>
<div class="code-name">#icon-loading</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-task-o"></use>
</svg>
<div class="name">task-o</div>
<div class="code-name">#icon-task-o</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-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-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-two"></use>
</svg>
<div class="name">refresh-two</div>
<div class="code-name">#icon-refresh-two</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