<!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=2632229" 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">users</div>
<div class="code-name">&#xe8b5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">数据</div>
<div class="code-name">&#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">权限</div>
<div class="code-name">&#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">shop</div>
<div class="code-name">&#xe8a9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">订单</div>
<div class="code-name">&#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">锁</div>
<div class="code-name">&#xe644;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">user</div>
<div class="code-name">&#xe600;</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=1624590162336') format('woff2'),
url('iconfont.woff?t=1624590162336') format('woff'),
url('iconfont.ttf?t=1624590162336') 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-users"></span>
<div class="name">
users
</div>
<div class="code-name">.icon-users
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuju"></span>
<div class="name">
数据
</div>
<div class="code-name">.icon-shuju
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanxian"></span>
<div class="name">
权限
</div>
<div class="code-name">.icon-quanxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shop"></span>
<div class="name">
shop
</div>
<div class="code-name">.icon-shop
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingdan"></span>
<div class="name">
订单
</div>
<div class="code-name">.icon-dingdan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-suo"></span>
<div class="name">
锁
</div>
<div class="code-name">.icon-suo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-user"></span>
<div class="name">
user
</div>
<div class="code-name">.icon-user
</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-">第一步：引入项目下面生成的 fontcl
基于vue+springboot开发的流浪猫狗救助网站项目源码.zip （77个子文件） 
.browserslistrc 30B babel.config.js 73B 项目说明.md 260B .prettierrc 0B
src App.vue 196B plugins element.js 1KB assets 
cat1.png 3KB font demo.css 8KB
demo_index.html 12KB iconfont.ttf 3KB iconfont.css 733B iconfont.json 1KB iconfont.woff2 2KB iconfont.js 6KB iconfont.woff 2KB
cat4.jpg 184KB cat5.jpg 79KB logo.png 7KB img catHeader3.jpg 325KB catHeader1.jpg 1.34MB catPicture2.jpg 14KB adress.png 869B catPicture11.jpg 2.48MB adopt3.png 8KB adopt2.png 4KB home.png 26KB catPicture5.jpg 459KB catPicture8.jpg 491KB catPicture4.jpg 505KB tel.png 421B catPicture9.jpg 249KB email.png 705B catPicture3.jpg 792KB aboutCat.jpg 145KB catPicture1.jpg 22KB adopt4.png 6KB treat.png 15KB adopt1.png 13KB rescue.png 13KB catPicture7.jpg 134KB catPicture6.jpg 417KB catHeader.jpg 282KB icon.png 3KB catPicture12.jpg 75KB catPicture10.jpg 528KB cat2.jpg 34KB css global.css 2KB cat3.jpg 258KB user.jpg 8KB adm.png 397KB blackredeye.jpg 864KB cat.jpg 140KB main.js 771B components message Message.vue 21KB HelloWorld.vue 2KB folderCat cat.vue 23KB adopt.vue 22KB announcement.vue 21KB user Users.vue 27KB life Life.vue 21KB Login.vue 9KB Home.vue 7KB organization organization.vue 23KB rescue.vue 17KB teach Teach.vue 21KB oneself Oneself.vue 3KB Welcome.vue 582B router index.js 3KB views Home.vue 323B About.vue 89B FeralCat.vue 23KB package.json 665B public favicon.ico 4KB index.html 594B package-lock.json 913KB FeralCatRescueSystem.postman_collection.json 43KB .gitignore 231B资源评论
以码当先2024-03-12感谢大佬分享的资源，对我启发很大，给了我新的灵感。
onnx
- 粉丝: 1w+
- 资源: 5632
最新资源
- 被忽视的成本：中国城市扩张导致的生态系统服务损失从三耦合的角度来看
- 永磁同步电机PMSM参数辨识的粒子群优化算法实现流程解析与案例探索,基于粒子群优化算法的PMSM参数精准辨识与迭代更新策略,基于粒子群优化算法的永磁同步电机PMSM参数辨识 关键词：永磁同步电机 粒子
- 揭示城市扩张对植被碳的影响封存能力-以长江经济带为例（软件翻译）
- 双馈风电机组与同步发电机组四机两区域Simulink仿真建模及风光储联合调频与多种控制策略结合混合储能技术研究,双馈风电机组与同步发电机组四机两区域Simulink仿真建模及风光储联合调频控制策略，混
- 电气安装工 初级工.pdf
- 清华大学：普通人如何抓住DeepSeek红利
- Swift 编程语言的入门教程，适合零基础或有一定编程经验的读者快速上手
- 清华出品（104页）DeepSeek从入门到精通
- DeepSeek指导手册(24页)
- 研究机翼在不同速度下产生的噪音和性能表现
- JimuFlow RPA工具MacOS版v1.0.0
- MATLAB滚动轴承故障机理建模与仿真分析：基于ODE45的数值计算与多类型故障诊断预测研究,MATLAB轴承动力学模拟：滚动轴承故障机理建模与数值计算，多故障类型模拟及数据分析报告（含故障类型识别与
- 基于改进Relief算法的特征选取与关联向量机在短期负荷预测中的Matlab应用复现,基于改进Relief算法的特征选取与关联向量机在短期负荷预测中的实践（Matlab复现）,相关向量机和特征选取技术
- COMSOL模拟技术揭秘：金属合金凝固过程及连铸工艺精确分析-相场流场与温度场的综合运用探究坯壳厚度计算,金属合金凝固与连铸过程数值模拟：相场流场温度场分析下的坯壳厚度计算,comsol数值模拟
- JimuFlow RPA工具Ubuntu版v1.0.0
- 煤层瓦斯渗透扩散与煤体孔隙裂隙二重介质特性研究-基于修正的P-M渗透率模型与气固耦合效应的模拟分析,煤层瓦斯渗透扩散的深部采煤模型研究：建立孔隙裂隙二重介质特性P-M渗透率模型与气固耦合模型的解析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
