<!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
- 粉丝: 9970
- 资源: 5626
最新资源
- 自己写的一个很小的工具，用于替换文件的扩展名 文件扩展名匹配的才会被替换，如果不指定原始扩展名，将修改所有文件的扩展名为新扩展名 如果新扩展名为空，则替换后文件将没有扩展名
- nginx整合lua脚本demo
- 欧标TYPE 2桩端充电枪
- (22782460)单片机设计(详细教程MSP430.zip
- UE-ORCA.zip
- (11696858)条形码生成打印
- 个人使用资源，请勿下载使用
- (180014056)pycairo-1.21.0-cp37-cp37m-win-amd64.whl.rar
- (3268844)3G无线基本知识.pdf
- 捷米特JM-PN-EIP（Profinet转Ethernet-IP）应用案例.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
