joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c0b1bfddb0c1a228c48edaf73f9bfbea020a3d6a
doodle-mini/miniprogram/assets/fonts/demo_index.html
T
R524809 9bdf850f20 feat: 完成分龄页开发
2026-05-06 17:28:51 +08:00

1500 lines
63 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">&#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=1778054314485') 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-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-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