<!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=3600839" 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">&#xeb08;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">map</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">pause circle</div> <div class="code-name">&#xe80d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">play circle</div> <div class="code-name">&#xe80f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">round_close</div> <div class="code-name">&#xe659;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">music_fill</div> <div class="code-name">&#xe795;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">music_forbid_fill</div> <div class="code-name">&#xe796;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe6e5;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-pointer-right</div> <div class="code-name">&#xe68c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">music</div> <div class="code-name">&#xe6a9;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">Music-Note 4</div> <div class="code-name">&#xe616;</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('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('iconfont.woff?t=1662519723535') format('woff'), url('iconfont.ttf?t=1662519723535') format('truetype'), url('iconfont.svg?t=1662519723535#iconfont') format('svg'); } </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-arrow-right"></span> <div class="name"> 箭头_向右 </div> <div class="code-name">.icon-arrow-right </div> </li> <li class="dib"> <span class="icon iconfont icon-map"></span> <div class="name"> map </div> <div class="code-name">.icon-map </div> </li> <li class="dib"> <span class="icon iconfont icon-pausecircle"></span> <div class="name"> pause circle </div> <div class="code-name">.icon-pausecircle </div> </li> <li class="dib"> <span class="icon iconfont icon-playcircle"></span> <div class="name"> play circle </div> <div class="code-name">.icon-playcircle </div> </li> <li class="dib"> <span class="icon iconfont icon-roundclose"></span> <div class="name"> round_close </div> <div class="code-name">.icon-roundclose </div> </li> <li class="dib"> <span class="icon iconfont icon-musicfill"></span> <div class="name"> music_fill </div> <div class="code-name">.icon-musicfill </div> </li> <li class="dib"> <span class="icon iconfont icon-musicforbidfill"></span> <div class="name"> music_forbid_fill </div> <div class="code-name">.icon-musicforbidfill </div> </li> <li class="dib"> <span class="icon iconfont icon-info"></span> <div class="name"> info </div> <div class="code-name">.icon-info </div> </li> <li class="dib"> <span class="icon iconfont icon-cc-pointer-right"></span> <div class="name"> cc-pointer-right </div> <div class="code-name">.icon-cc-pointer-right </div> </li> <li class="dib"> <span class="icon iconfont icon-note-2"></span> <div class="name"> music </div> <div class="code-name">.icon-note-2 </div> </li> <li class="dib"> <span class="icon iconfont icon-note-1"></span> <div class="name"> Music-Note 4 </div> <div class="code-name">.icon-note-1 </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-">第一步:引入项目下面生成的 fontclass 代码:</h3> <pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> <pre><code class="language-html"><span class="iconfont icon-xxx"></span> </code></pre> <blockquote> <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content symbol"> <ul class="icon_lists dib-box"> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right"></use> </svg> <div class="name">箭头_向右</div> <div class="code-name">#icon-arrow-right</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-map"></use> </svg> <div class="name">map</div> <div class="code-name">#icon-map</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-pausecircle"></use> </svg> <div class="name">pause circle</div> <div class="code-name">#icon-pausecircle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-playcircle"></use> </svg> <div class="name">play circle</div> <div class="code-name">#icon-playcircle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-roundclose"></use> </svg> <div class="name">round_close</div> <div class="code-name">#icon-roundclose</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-musicfill"></use> </svg> <div class="name">music_fill</div> <div class="code-name">#icon-musicfill</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-musicforbidfill"></use> </svg> <div class="name">music_forbid_fill</div> <div class="code-name">#icon-musicforbidfill</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-info"></use> </svg> <div class="name">info</div> <div class="code-name">#icon-info</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-cc-pointer-right"></use> </svg> <div class="name">cc-pointer-right</div> <div class="code-name">#icon-cc-pointer-right</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-note-2"></use> </svg> <div class="name">music</div> <div class="code-name">#icon-note-2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-note-1"></use> </svg> <div class="name">Music-Note 4</div> <div class="code-name">#icon-note-1</div> </li> </ul> <div class="article markdown"> <h2 id="symbol-">Symbol 引用</h2> <hr> <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> <ul> <li>支持多色图标了,不再受单色限制。</li> <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> <li>兼容性较差,支持 IE9+,及现代浏览器。</li> <li>浏览器渲染 SVG 的性能一般,还不如 png。</li> </ul> <p>使用步骤如下:</p> <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> <pre><code class="language-html"><script src="./iconfont.js"></script> </code></pre> <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> <pre><code class="language-html"><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </code></pre> <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> <pre><code class="language-html"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> </code></pre> </div> </div> </div> </div> <script> $(document).ready(function () { $('.tab-container .content:first').show() $('#tabs li').click(function (e) { var tabContent = $('.tab-container .content') var index = $(this).index() if ($(this).hasClass('active')) { return } else { $('#tabs li').removeClass('active') $(this).addClass('active') tabContent.hide().eq(index).fadeIn() } }) }) </script> </body> </html>