<!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=4046032" 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"></span>
<div class="name">往返低价</div>
<div class="code-name">&#xe8da;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">share</div>
<div class="code-name">&#xe6f3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">notice</div>
<div class="code-name">&#xe70a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">email</div>
<div class="code-name">&#xe69f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">234日历</div>
<div class="code-name">&#xe8cf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">folder</div>
<div class="code-name">&#xe7d1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电话</div>
<div class="code-name">&#xeb23;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">Chat</div>
<div class="code-name">&#xea94;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">location</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">login</div>
<div class="code-name">&#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">edit</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">car</div>
<div class="code-name">&#xe7d7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">data</div>
<div class="code-name">&#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">bus</div>
<div class="code-name">&#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">hotel</div>
<div class="code-name">&#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">咖啡</div>
<div class="code-name">&#xe75b;</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('iconfont.woff2?t=1682924196482') format('woff2'),
url('iconfont.woff?t=1682924196482') format('woff'),
url('iconfont.ttf?t=1682924196482') 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"
><span class="iconfont">&#x33;</span>
</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-wangfandijia"></span>
<div class="name">
往返低价
</div>
<div class="code-name">.icon-wangfandijia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share"></span>
<div class="name">
share
</div>
<div class="co
仿公共汽车购票网站2个页面，一个首页，一个登录页
114 浏览量
2024-04-09
21:53:44
上传
评论
收藏 498KB ZIP 举报
buyTicket.zip （31个子文件） 
buyTicket img 
bg.webp 32KB
discount.jpg 36KB adv.webp 48KB css font demo.css 8KB
demo_index.html 19KB iconfont.ttf 6KB iconfont.css 1KB iconfont.json 2KB iconfont.woff2 3KB iconfont.js 19KB iconfont.woff 4KB login.css 797B base.css 1KB index.css 5KB login.html 2KB index.html 8KB layui layui.js 284KB font iconfont.ttf 45KB iconfont.woff2 25KB
iconfont.svg 299KB iconfont.eot 46KB iconfont.woff 30KB css layui.css 80KB modules laydate default laydate.css 8KB code.css 2KB layer default 
loading-2.gif 2KB loading-1.gif 701B loading-0.gif 6KB
icon-ext.png 6KB layer.css 14KB icon.png 11KB资源评论
