<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.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=3453350" 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">&#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">刷新</div>
<div class="code-name">&#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头</div>
<div class="code-name">&#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">加油</div>
<div class="code-name">&#xe9e4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">热门</div>
<div class="code-name">&#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">相机</div>
<div class="code-name">&#xe8bc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">火热</div>
<div class="code-name">&#xeebc;</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=1654516660984') format('woff2'),
url('iconfont.woff?t=1654516660984') format('woff'),
url('iconfont.ttf?t=1654516660984') 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-xin"></span>
<div class="name">
新
</div>
<div class="code-name">.icon-xin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuaxin"></span>
<div class="name">
刷新
</div>
<div class="code-name">.icon-shuaxin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-angle-double-right"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-angle-double-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiayou"></span>
<div class="name">
加油
</div>
<div class="code-name">.icon-jiayou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianpinghuatubiaosheji-"></span>
<div class="name">
热门
</div>
<div class="code-name">.icon-bianpinghuatubiaosheji-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangji"></span>
<div class="name">
相机
</div>
<div class="code-name">.icon-xiangji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huore"></span>
<div class="name">
火热
</div>
<div class="code-name">.icon-huore
</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>
百度首页.rar （22个子文件） 
百度首页 .vscode 
settings.json 42B index.less 7KB font_3453350_p5znspa0vyg demo.css 8KB
demo_index.html 13KB iconfont.ttf 4KB iconfont.css 766B iconfont.json 1KB iconfont.woff2 2KB iconfont.js 12KB iconfont.woff 3KB img 
wenku.png 3KB yinyue.png 2KB yingxiao.png 3KB baike.png 2KB fanyi.png 4KB 百度.png 15KB zhidao.png 2KB zhibo.png 4KB jiankang.png 3KB xueshu.png 3KB baidu.html 4KB index.css 5KB资源评论
一只java小菜鸡
- 粉丝: 3301
- 资源: 145
最新资源
- MATLAB实现绘制NURBS曲线程序源码
- 处理word文档，解析文档格式、图片、表达式、表格-doc、docx篇
- C#微信营销平台源码 微信营销后台管理系统源码数据库 文本存储源码类型 WebForm
- 技术资料分享65C02汇编指令集很好的技术资料.zip
- 课程作业《用51单片机实现的红外人体检测装置》+C语言项目源码+文档说明
- app自动化小白之appium环境安装
- 课程设计-哲学家就餐问题（并发算法问题）-解决策略：资源分级、最多允许四个哲学家同时拿筷子、服务员模式、尝试等待策略
- C#大型公司财务系统源码 企业财务管理系统源码数据库 SQL2008源码类型 WebForm
- MDK文件编译配套工程
- java项目，课程设计-ssm企业人事管理系统ssm.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
