浪子
1278 lines
42 KiB
HTML
1278 lines
42 KiB
HTML
<!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>Font class</span></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="tab-container">
|
|
<div class="content font-class">
|
|
<ul class="icon_lists dib-box">
|
|
|
|
<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-chat-full"></span>
|
|
<div class="name">
|
|
chat-full
|
|
</div>
|
|
<div class="code-name">.icon-chat-full
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-communityfill"></span>
|
|
<div class="name">
|
|
communityfill
|
|
</div>
|
|
<div class="code-name">.icon-communityfill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-fire"></span>
|
|
<div class="name">
|
|
fire
|
|
</div>
|
|
<div class="code-name">.icon-fire
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-left"></span>
|
|
<div class="name">
|
|
left
|
|
</div>
|
|
<div class="code-name">.icon-left
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-info"></span>
|
|
<div class="name">
|
|
info
|
|
</div>
|
|
<div class="code-name">.icon-info
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-good_fill"></span>
|
|
<div class="name">
|
|
good_fill
|
|
</div>
|
|
<div class="code-name">.icon-good_fill
|
|
</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-message_fill"></span>
|
|
<div class="name">
|
|
message_fill
|
|
</div>
|
|
<div class="code-name">.icon-message_fill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pullright"></span>
|
|
<div class="name">
|
|
pullright
|
|
</div>
|
|
<div class="code-name">.icon-pullright
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pen"></span>
|
|
<div class="name">
|
|
pen
|
|
</div>
|
|
<div class="code-name">.icon-pen
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-heart_line"></span>
|
|
<div class="name">
|
|
heart_line
|
|
</div>
|
|
<div class="code-name">.icon-heart_line
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-notice"></span>
|
|
<div class="name">
|
|
notice
|
|
</div>
|
|
<div class="code-name">.icon-notice
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mark"></span>
|
|
<div class="name">
|
|
mark
|
|
</div>
|
|
<div class="code-name">.icon-mark
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-people"></span>
|
|
<div class="name">
|
|
people
|
|
</div>
|
|
<div class="code-name">.icon-people
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-good_line"></span>
|
|
<div class="name">
|
|
good_line
|
|
</div>
|
|
<div class="code-name">.icon-good_line
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-friends_circle"></span>
|
|
<div class="name">
|
|
friends_circle
|
|
</div>
|
|
<div class="code-name">.icon-friends_circle
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pullleft"></span>
|
|
<div class="name">
|
|
pullleft
|
|
</div>
|
|
<div class="code-name">.icon-pullleft
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-right"></span>
|
|
<div class="name">
|
|
right
|
|
</div>
|
|
<div class="code-name">.icon-right
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-tags"></span>
|
|
<div class="name">
|
|
tags
|
|
</div>
|
|
<div class="code-name">.icon-tags
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-yes_fill"></span>
|
|
<div class="name">
|
|
yes_fill
|
|
</div>
|
|
<div class="code-name">.icon-yes_fill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-warning"></span>
|
|
<div class="name">
|
|
warning
|
|
</div>
|
|
<div class="code-name">.icon-warning
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-friend"></span>
|
|
<div class="name">
|
|
friend
|
|
</div>
|
|
<div class="code-name">.icon-friend
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-clover"></span>
|
|
<div class="name">
|
|
clover
|
|
</div>
|
|
<div class="code-name">.icon-clover
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-timeline"></span>
|
|
<div class="name">
|
|
timeline
|
|
</div>
|
|
<div class="code-name">.icon-timeline
|
|
</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-yemian"></span>
|
|
<div class="name">
|
|
yemian
|
|
</div>
|
|
<div class="code-name">.icon-yemian
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-VIP"></span>
|
|
<div class="name">
|
|
VIP
|
|
</div>
|
|
<div class="code-name">.icon-VIP
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pen_fill"></span>
|
|
<div class="name">
|
|
pen_fill
|
|
</div>
|
|
<div class="code-name">.icon-pen_fill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-eye_fill"></span>
|
|
<div class="name">
|
|
eye_fill
|
|
</div>
|
|
<div class="code-name">.icon-eye_fill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-eye"></span>
|
|
<div class="name">
|
|
eye
|
|
</div>
|
|
<div class="code-name">.icon-eye
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-time"></span>
|
|
<div class="name">
|
|
time
|
|
</div>
|
|
<div class="code-name">.icon-time
|
|
</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-newmssco"></span>
|
|
<div class="name">
|
|
newmssco
|
|
</div>
|
|
<div class="code-name">.icon-newmssco
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-weibo"></span>
|
|
<div class="name">
|
|
weibo
|
|
</div>
|
|
<div class="code-name">.icon-weibo
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-share_out"></span>
|
|
<div class="name">
|
|
share_out
|
|
</div>
|
|
<div class="code-name">.icon-share_out
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-wechat"></span>
|
|
<div class="name">
|
|
wechat
|
|
</div>
|
|
<div class="code-name">.icon-wechat
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-star_line"></span>
|
|
<div class="name">
|
|
star_line
|
|
</div>
|
|
<div class="code-name">.icon-star_line
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-qq"></span>
|
|
<div class="name">
|
|
qq
|
|
</div>
|
|
<div class="code-name">.icon-qq
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-locate"></span>
|
|
<div class="name">
|
|
locate
|
|
</div>
|
|
<div class="code-name">.icon-locate
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-calendar"></span>
|
|
<div class="name">
|
|
calendar
|
|
</div>
|
|
<div class="code-name">.icon-calendar
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-douban"></span>
|
|
<div class="name">
|
|
douban
|
|
</div>
|
|
<div class="code-name">.icon-douban
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-file"></span>
|
|
<div class="name">
|
|
file
|
|
</div>
|
|
<div class="code-name">.icon-file
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-link"></span>
|
|
<div class="name">
|
|
link
|
|
</div>
|
|
<div class="code-name">.icon-link
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-message"></span>
|
|
<div class="name">
|
|
message
|
|
</div>
|
|
<div class="code-name">.icon-message
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-github"></span>
|
|
<div class="name">
|
|
github
|
|
</div>
|
|
<div class="code-name">.icon-github
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-more"></span>
|
|
<div class="name">
|
|
more
|
|
</div>
|
|
<div class="code-name">.icon-more
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-filebox"></span>
|
|
<div class="name">
|
|
filebox
|
|
</div>
|
|
<div class="code-name">.icon-filebox
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-countdownfill"></span>
|
|
<div class="name">
|
|
countdownfill
|
|
</div>
|
|
<div class="code-name">.icon-countdownfill
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-camera"></span>
|
|
<div class="name">
|
|
camera
|
|
</div>
|
|
<div class="code-name">.icon-camera
|
|
</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-avatar"></span>
|
|
<div class="name">
|
|
avatar
|
|
</div>
|
|
<div class="code-name">.icon-avatar
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-del"></span>
|
|
<div class="name">
|
|
del
|
|
</div>
|
|
<div class="code-name">.icon-del
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-bigvoice"></span>
|
|
<div class="name">
|
|
bigvoice
|
|
</div>
|
|
<div class="code-name">.icon-bigvoice
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-yes"></span>
|
|
<div class="name">
|
|
yes
|
|
</div>
|
|
<div class="code-name">.icon-yes
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-shuidi"></span>
|
|
<div class="name">
|
|
shuidi
|
|
</div>
|
|
<div class="code-name">.icon-shuidi
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-upload"></span>
|
|
<div class="name">
|
|
upload
|
|
</div>
|
|
<div class="code-name">.icon-upload
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-star_fill"></span>
|
|
<div class="name">
|
|
star_fill
|
|
</div>
|
|
<div class="code-name">.icon-star_fill
|
|
</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-up"></span>
|
|
<div class="name">
|
|
up
|
|
</div>
|
|
<div class="code-name">.icon-up
|
|
</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-menu"></span>
|
|
<div class="name">
|
|
menu
|
|
</div>
|
|
<div class="code-name">.icon-menu
|
|
</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-menu_1"></span>
|
|
<div class="name">
|
|
menu_1
|
|
</div>
|
|
<div class="code-name">.icon-menu_1
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-download_1"></span>
|
|
<div class="name">
|
|
download_1
|
|
</div>
|
|
<div class="code-name">.icon-download_1
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-question"></span>
|
|
<div class="name">
|
|
question
|
|
</div>
|
|
<div class="code-name">.icon-question
|
|
</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"><link rel="stylesheet" href="./iconfont.css">
|
|
</code></pre>
|
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
</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-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-chat-full"></use>
|
|
</svg>
|
|
<div class="name">chat-full</div>
|
|
<div class="code-name">#icon-chat-full</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-communityfill"></use>
|
|
</svg>
|
|
<div class="name">communityfill</div>
|
|
<div class="code-name">#icon-communityfill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-fire"></use>
|
|
</svg>
|
|
<div class="name">fire</div>
|
|
<div class="code-name">#icon-fire</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-left"></use>
|
|
</svg>
|
|
<div class="name">left</div>
|
|
<div class="code-name">#icon-left</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-info"></use>
|
|
</svg>
|
|
<div class="name">info</div>
|
|
<div class="code-name">#icon-info</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-good_fill"></use>
|
|
</svg>
|
|
<div class="name">good_fill</div>
|
|
<div class="code-name">#icon-good_fill</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-message_fill"></use>
|
|
</svg>
|
|
<div class="name">message_fill</div>
|
|
<div class="code-name">#icon-message_fill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pullright"></use>
|
|
</svg>
|
|
<div class="name">pullright</div>
|
|
<div class="code-name">#icon-pullright</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pen"></use>
|
|
</svg>
|
|
<div class="name">pen</div>
|
|
<div class="code-name">#icon-pen</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-heart_line"></use>
|
|
</svg>
|
|
<div class="name">heart_line</div>
|
|
<div class="code-name">#icon-heart_line</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-notice"></use>
|
|
</svg>
|
|
<div class="name">notice</div>
|
|
<div class="code-name">#icon-notice</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mark"></use>
|
|
</svg>
|
|
<div class="name">mark</div>
|
|
<div class="code-name">#icon-mark</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-people"></use>
|
|
</svg>
|
|
<div class="name">people</div>
|
|
<div class="code-name">#icon-people</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-good_line"></use>
|
|
</svg>
|
|
<div class="name">good_line</div>
|
|
<div class="code-name">#icon-good_line</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-friends_circle"></use>
|
|
</svg>
|
|
<div class="name">friends_circle</div>
|
|
<div class="code-name">#icon-friends_circle</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pullleft"></use>
|
|
</svg>
|
|
<div class="name">pullleft</div>
|
|
<div class="code-name">#icon-pullleft</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-right"></use>
|
|
</svg>
|
|
<div class="name">right</div>
|
|
<div class="code-name">#icon-right</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tags"></use>
|
|
</svg>
|
|
<div class="name">tags</div>
|
|
<div class="code-name">#icon-tags</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-yes_fill"></use>
|
|
</svg>
|
|
<div class="name">yes_fill</div>
|
|
<div class="code-name">#icon-yes_fill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-warning"></use>
|
|
</svg>
|
|
<div class="name">warning</div>
|
|
<div class="code-name">#icon-warning</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-friend"></use>
|
|
</svg>
|
|
<div class="name">friend</div>
|
|
<div class="code-name">#icon-friend</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-clover"></use>
|
|
</svg>
|
|
<div class="name">clover</div>
|
|
<div class="code-name">#icon-clover</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-timeline"></use>
|
|
</svg>
|
|
<div class="name">timeline</div>
|
|
<div class="code-name">#icon-timeline</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-yemian"></use>
|
|
</svg>
|
|
<div class="name">yemian</div>
|
|
<div class="code-name">#icon-yemian</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-VIP"></use>
|
|
</svg>
|
|
<div class="name">VIP</div>
|
|
<div class="code-name">#icon-VIP</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pen_fill"></use>
|
|
</svg>
|
|
<div class="name">pen_fill</div>
|
|
<div class="code-name">#icon-pen_fill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-eye_fill"></use>
|
|
</svg>
|
|
<div class="name">eye_fill</div>
|
|
<div class="code-name">#icon-eye_fill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-eye"></use>
|
|
</svg>
|
|
<div class="name">eye</div>
|
|
<div class="code-name">#icon-eye</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-time"></use>
|
|
</svg>
|
|
<div class="name">time</div>
|
|
<div class="code-name">#icon-time</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-newmssco"></use>
|
|
</svg>
|
|
<div class="name">newmssco</div>
|
|
<div class="code-name">#icon-newmssco</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-weibo"></use>
|
|
</svg>
|
|
<div class="name">weibo</div>
|
|
<div class="code-name">#icon-weibo</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-share_out"></use>
|
|
</svg>
|
|
<div class="name">share_out</div>
|
|
<div class="code-name">#icon-share_out</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wechat"></use>
|
|
</svg>
|
|
<div class="name">wechat</div>
|
|
<div class="code-name">#icon-wechat</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-star_line"></use>
|
|
</svg>
|
|
<div class="name">star_line</div>
|
|
<div class="code-name">#icon-star_line</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-qq"></use>
|
|
</svg>
|
|
<div class="name">qq</div>
|
|
<div class="code-name">#icon-qq</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-locate"></use>
|
|
</svg>
|
|
<div class="name">locate</div>
|
|
<div class="code-name">#icon-locate</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-calendar"></use>
|
|
</svg>
|
|
<div class="name">calendar</div>
|
|
<div class="code-name">#icon-calendar</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-douban"></use>
|
|
</svg>
|
|
<div class="name">douban</div>
|
|
<div class="code-name">#icon-douban</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-file"></use>
|
|
</svg>
|
|
<div class="name">file</div>
|
|
<div class="code-name">#icon-file</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-link"></use>
|
|
</svg>
|
|
<div class="name">link</div>
|
|
<div class="code-name">#icon-link</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-message"></use>
|
|
</svg>
|
|
<div class="name">message</div>
|
|
<div class="code-name">#icon-message</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-github"></use>
|
|
</svg>
|
|
<div class="name">github</div>
|
|
<div class="code-name">#icon-github</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-more"></use>
|
|
</svg>
|
|
<div class="name">more</div>
|
|
<div class="code-name">#icon-more</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-filebox"></use>
|
|
</svg>
|
|
<div class="name">filebox</div>
|
|
<div class="code-name">#icon-filebox</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-countdownfill"></use>
|
|
</svg>
|
|
<div class="name">countdownfill</div>
|
|
<div class="code-name">#icon-countdownfill</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-camera"></use>
|
|
</svg>
|
|
<div class="name">camera</div>
|
|
<div class="code-name">#icon-camera</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-avatar"></use>
|
|
</svg>
|
|
<div class="name">avatar</div>
|
|
<div class="code-name">#icon-avatar</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-del"></use>
|
|
</svg>
|
|
<div class="name">del</div>
|
|
<div class="code-name">#icon-del</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-bigvoice"></use>
|
|
</svg>
|
|
<div class="name">bigvoice</div>
|
|
<div class="code-name">#icon-bigvoice</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-yes"></use>
|
|
</svg>
|
|
<div class="name">yes</div>
|
|
<div class="code-name">#icon-yes</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-shuidi"></use>
|
|
</svg>
|
|
<div class="name">shuidi</div>
|
|
<div class="code-name">#icon-shuidi</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-upload"></use>
|
|
</svg>
|
|
<div class="name">upload</div>
|
|
<div class="code-name">#icon-upload</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-star_fill"></use>
|
|
</svg>
|
|
<div class="name">star_fill</div>
|
|
<div class="code-name">#icon-star_fill</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-up"></use>
|
|
</svg>
|
|
<div class="name">up</div>
|
|
<div class="code-name">#icon-up</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-menu"></use>
|
|
</svg>
|
|
<div class="name">menu</div>
|
|
<div class="code-name">#icon-menu</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-menu_1"></use>
|
|
</svg>
|
|
<div class="name">menu_1</div>
|
|
<div class="code-name">#icon-menu_1</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-download_1"></use>
|
|
</svg>
|
|
<div class="name">download_1</div>
|
|
<div class="code-name">#icon-download_1</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-question"></use>
|
|
</svg>
|
|
<div class="name">question</div>
|
|
<div class="code-name">#icon-question</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"><script src="./iconfont.js"></script>
|
|
</code></pre>
|
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
<pre><code class="language-html"><style>
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</code></pre>
|
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xxx"></use>
|
|
</svg>
|
|
</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>
|