【免费】WPF后台管理UI2图标字体资源-CSDN文库

共6个文件

css：2个

js：1个

ttf：1个

wpf

需积分: 0 199 浏览量 2023-10-27 15:03:47 上传评论收藏 19KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Iconfont-Sample2.zip （6个子文件）

Iconfont-Sample2

demo.css 8KB

demo_index.html 23KB

iconfont.ttf 6KB

iconfont.css 1KB

iconfont.json 3KB

iconfont.js 20KB

<!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>  <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=4300799" 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">invites</div> <div class="code-name">&#xe609;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">calendar</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">star</div> <div class="code-name">&#xe60b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">response</div> <div class="code-name">&#xe60c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">message</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">notification</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">click</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">filter</div> <div class="code-name">&#xe610;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">location</div> <div class="code-name">&#xe611;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">facebook</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">icon-kfckfc</div> <div class="code-name">&#xe613;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">yelp</div> <div class="code-name">&#xe614;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">send</div> <div class="code-name">&#xe615;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dropdown</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dashboard</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">reviews</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">config</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">invitations</div> <div class="code-name">&#xe603;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">landing</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">widgets</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">customers</div> <div class="code-name">&#xe606;</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.ttf?t=1698321054663') 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;

评论收藏

内容反馈