@nutui/nutui-react

<!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=3744858" 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 nutui-iconfont"></span> <div class="name">photograph-line</div> <div class="code-name">&#xe65e;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">qr-scan-2-line</div> <div class="code-name">&#xe65f;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">cloud-line</div> <div class="code-name">&#xe660;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">new-built</div> <div class="code-name">&#xe658;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">capacity</div> <div class="code-name">&#xe659;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">switch</div> <div class="code-name">&#xe65a;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">upload</div> <div class="code-name">&#xe65b;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">Batch operation</div> <div class="code-name">&#xe65c;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">top</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">left</div> <div class="code-name">&#xe655;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">down</div> <div class="code-name">&#xe656;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">up</div> <div class="code-name">&#xe657;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">save</div> <div class="code-name">&#xe653;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">horizontal-n</div> <div class="code-name">&#xe654;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">ask</div> <div class="code-name">&#xe61a;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">check-disabled</div> <div class="code-name">&#xe61b;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">bookmark</div> <div class="code-name">&#xe61c;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">check-normal</div> <div class="code-name">&#xe61d;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">close-little</div> <div class="code-name">&#xe61e;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">date</div> <div class="code-name">&#xe61f;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">checked</div> <div class="code-name">&#xe621;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">del2</div> <div class="code-name">&#xe622;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">copy-1</div> <div class="code-name">&#xe623;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">home</div> <div class="code-name">&#xe624;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">filter</div> <div class="code-name">&#xe625;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">download</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">copy</div> <div class="code-name">&#xe627;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">image</div> <div class="code-name">&#xe628;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe629;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">mask-close</div> <div class="code-name">&#xe62a;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">Check</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">locationg3</div> <div class="code-name">&#xe62c;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">go-back</div> <div class="code-name">&#xe62d;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">message</div> <div class="code-name">&#xe62e;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">fabulous</div> <div class="code-name">&#xe62f;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">failure</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">minus</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">loading</div> <div class="code-name">&#xe632;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">marshalling</div> <div class="code-name">&#xe633;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">play-stop</div> <div class="code-name">&#xe634;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">photograph</div> <div class="code-name">&#xe635;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">my2</div> <div class="code-name">&#xe636;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">microphone</div> <div class="code-name">&#xe637;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">play-circle-fill</div> <div class="code-name">&#xe638;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">play-start</div> <div class="code-name">&#xe639;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">poweroff-circle-fill</div> <div class="code-name">&#xe63a;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">right</div> <div class="code-name">&#xe63b;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">plus</div> <div class="code-name">&#xe63c;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">retweet</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">notice</div> <div class="code-name">&#xe63e;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">s-follow</div> <div class="code-name">&#xe63f;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">refresh</div> <div class="code-name">&#xe640;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">scan2</div> <div class="code-name">&#xe641;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">triangle-down</div> <div class="code-name">&#xe642;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">ticket</div> <div class="code-name">&#xe643;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">eye</div> <div class="code-name">&#xe644;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">star</div> <div class="code-name">&#xe645;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">link</div> <div class="code-name">&#xe646;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">success</div> <div class="code-name">&#xe647;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">triangle-up</div> <div class="code-name">&#xe648;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">search2</div> <div class="code-name">&#xe649;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">share-n</div> <div class="code-name">&#xe64a;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">jdl</div> <div class="code-name">&#xe64b;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">volume</div> <div class="code-name">&#xe64c;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">wallet</div> <div class="code-name">&#xe64d;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">more-x</div> <div class="code-name">&#xe64e;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">more-s</div> <div class="code-name">&#xe64f;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">bank-card</div> <div class="code-name">&#xe650;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">service</div> <div class="code-name">&#xe651;</div> </li> <li class="dib"> <span class="icon nutui-iconfont"></span> <div class="name">warning</div> <div class="code-name">&#xe652;</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: 'nutui-iconfont'; src: url('iconfont.woff2?t=1672726613438') format('woff2'), url('iconfont.woff?t=1672726613438') format('woff'), url('iconfont.ttf?t=1672726613438') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.nutui-iconfont { font-family: "nutui-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="nutui-iconfont">&#x33;</span> </code></pre> <blockquote> <p>"nutui-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 nutui-iconfont nut-icon-photograph-line"></span> <div class="name"> photograph-line </div> <div class="code-name">.nut-icon-photograph-line </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-qr-scan-2-line"></span> <div class="name"> qr-scan-2-line </div> <div class="code-name">.nut-icon-qr-scan-2-line </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-cloud-line"></span> <div class="name"> cloud-line </div> <div class="code-name">.nut-icon-cloud-line </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-new-built"></span> <div class="name"> new-built </div> <div class="code-name">.nut-icon-new-built </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-capacity"></span> <div class="name"> capacity </div> <div class="code-name">.nut-icon-capacity </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-switch"></span> <div class="name"> switch </div> <div class="code-name">.nut-icon-switch </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-upload"></span> <div class="name"> upload </div> <div class="code-name">.nut-icon-upload </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-a-Batchoperation"></span> <div class="name"> Batch operation </div> <div class="code-name">.nut-icon-a-Batchoperation </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-top"></span> <div class="name"> top </div> <div class="code-name">.nut-icon-top </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-left"></span> <div class="name"> left </div> <div class="code-name">.nut-icon-left </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-down"></span> <div class="name"> down </div> <div class="code-name">.nut-icon-down </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-up"></span> <div class="name"> up </div> <div class="code-name">.nut-icon-up </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-save"></span> <div class="name"> save </div> <div class="code-name">.nut-icon-save </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-horizontal-n"></span> <div class="name"> horizontal-n </div> <div class="code-name">.nut-icon-horizontal-n </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-ask"></span> <div class="name"> ask </div> <div class="code-name">.nut-icon-ask </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-check-disabled"></span> <div class="name"> check-disabled </div> <div class="code-name">.nut-icon-check-disabled </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-bookmark"></span> <div class="name"> bookmark </div> <div class="code-name">.nut-icon-bookmark </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-check-normal"></span> <div class="name"> check-normal </div> <div class="code-name">.nut-icon-check-normal </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-close-little"></span> <div class="name"> close-little </div> <div class="code-name">.nut-icon-close-little </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-date"></span> <div class="name"> date </div> <div class="code-name">.nut-icon-date </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.nut-icon-edit </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-checked"></span> <div class="name"> checked </div> <div class="code-name">.nut-icon-checked </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-del2"></span> <div class="name"> del2 </div> <div class="code-name">.nut-icon-del2 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-copy-1"></span> <div class="name"> copy-1 </div> <div class="code-name">.nut-icon-copy-1 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-home"></span> <div class="name"> home </div> <div class="code-name">.nut-icon-home </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-filter"></span> <div class="name"> filter </div> <div class="code-name">.nut-icon-filter </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-download"></span> <div class="name"> download </div> <div class="code-name">.nut-icon-download </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-copy"></span> <div class="name"> copy </div> <div class="code-name">.nut-icon-copy </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-image"></span> <div class="name"> image </div> <div class="code-name">.nut-icon-image </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-add"></span> <div class="name"> add </div> <div class="code-name">.nut-icon-add </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-mask-close"></span> <div class="name"> mask-close </div> <div class="code-name">.nut-icon-mask-close </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-Check"></span> <div class="name"> Check </div> <div class="code-name">.nut-icon-Check </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-locationg3"></span> <div class="name"> locationg3 </div> <div class="code-name">.nut-icon-locationg3 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-go-back"></span> <div class="name"> go-back </div> <div class="code-name">.nut-icon-go-back </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-message"></span> <div class="name"> message </div> <div class="code-name">.nut-icon-message </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-fabulous"></span> <div class="name"> fabulous </div> <div class="code-name">.nut-icon-fabulous </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-failure"></span> <div class="name"> failure </div> <div class="code-name">.nut-icon-failure </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-minus"></span> <div class="name"> minus </div> <div class="code-name">.nut-icon-minus </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-loading"></span> <div class="name"> loading </div> <div class="code-name">.nut-icon-loading </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-marshalling"></span> <div class="name"> marshalling </div> <div class="code-name">.nut-icon-marshalling </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-play-stop"></span> <div class="name"> play-stop </div> <div class="code-name">.nut-icon-play-stop </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-photograph"></span> <div class="name"> photograph </div> <div class="code-name">.nut-icon-photograph </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-my2"></span> <div class="name"> my2 </div> <div class="code-name">.nut-icon-my2 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-microphone"></span> <div class="name"> microphone </div> <div class="code-name">.nut-icon-microphone </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-play-circle-fill"></span> <div class="name"> play-circle-fill </div> <div class="code-name">.nut-icon-play-circle-fill </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-play-start"></span> <div class="name"> play-start </div> <div class="code-name">.nut-icon-play-start </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-poweroff-circle-fill"></span> <div class="name"> poweroff-circle-fill </div> <div class="code-name">.nut-icon-poweroff-circle-fill </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-right"></span> <div class="name"> right </div> <div class="code-name">.nut-icon-right </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-plus"></span> <div class="name"> plus </div> <div class="code-name">.nut-icon-plus </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-retweet"></span> <div class="name"> retweet </div> <div class="code-name">.nut-icon-retweet </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-notice"></span> <div class="name"> notice </div> <div class="code-name">.nut-icon-notice </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-s-follow"></span> <div class="name"> s-follow </div> <div class="code-name">.nut-icon-s-follow </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-refresh"></span> <div class="name"> refresh </div> <div class="code-name">.nut-icon-refresh </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-scan2"></span> <div class="name"> scan2 </div> <div class="code-name">.nut-icon-scan2 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-triangle-down"></span> <div class="name"> triangle-down </div> <div class="code-name">.nut-icon-triangle-down </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-ticket"></span> <div class="name"> ticket </div> <div class="code-name">.nut-icon-ticket </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-eye"></span> <div class="name"> eye </div> <div class="code-name">.nut-icon-eye </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-star"></span> <div class="name"> star </div> <div class="code-name">.nut-icon-star </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-link"></span> <div class="name"> link </div> <div class="code-name">.nut-icon-link </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-success"></span> <div class="name"> success </div> <div class="code-name">.nut-icon-success </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-triangle-up"></span> <div class="name"> triangle-up </div> <div class="code-name">.nut-icon-triangle-up </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-search2"></span> <div class="name"> search2 </div> <div class="code-name">.nut-icon-search2 </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-share-n"></span> <div class="name"> share-n </div> <div class="code-name">.nut-icon-share-n </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-jdl"></span> <div class="name"> jdl </div> <div class="code-name">.nut-icon-jdl </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-volume"></span> <div class="name"> volume </div> <div class="code-name">.nut-icon-volume </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-wallet"></span> <div class="name"> wallet </div> <div class="code-name">.nut-icon-wallet </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-more-x"></span> <div class="name"> more-x </div> <div class="code-name">.nut-icon-more-x </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-more-s"></span> <div class="name"> more-s </div> <div class="code-name">.nut-icon-more-s </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-bank-card"></span> <div class="name"> bank-card </div> <div class="code-name">.nut-icon-bank-card </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-service"></span> <div class="name"> service </div> <div class="code-name">.nut-icon-service </div> </li> <li class="dib"> <span class="icon nutui-iconfont nut-icon-warning"></span> <div class="name"> warning </div> <div class="code-name">.nut-icon-warning </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="nutui-iconfont nut-icon-xxx"></span> </code></pre> <blockquote> <p>" nutui-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="#nut-icon-photograph-line"></use> </svg> <div class="name">photograph-line</div> <div class="code-name">#nut-icon-photograph-line</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-qr-scan-2-line"></use> </svg> <div class="name">qr-scan-2-line</div> <div class="code-name">#nut-icon-qr-scan-2-line</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-cloud-line"></use> </svg> <div class="name">cloud-line</div> <div class="code-name">#nut-icon-cloud-line</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-new-built"></use> </svg> <div class="name">new-built</div> <div class="code-name">#nut-icon-new-built</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-capacity"></use> </svg> <div class="name">capacity</div> <div class="code-name">#nut-icon-capacity</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-switch"></use> </svg> <div class="name">switch</div> <div class="code-name">#nut-icon-switch</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-upload"></use> </svg> <div class="name">upload</div> <div class="code-name">#nut-icon-upload</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-a-Batchoperation"></use> </svg> <div class="name">Batch operation</div> <div class="code-name">#nut-icon-a-Batchoperation</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-top"></use> </svg> <div class="name">top</div> <div class="code-name">#nut-icon-top</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-left"></use> </svg> <div class="name">left</div> <div class="code-name">#nut-icon-left</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-down"></use> </svg> <div class="name">down</div> <div class="code-name">#nut-icon-down</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-up"></use> </svg> <div class="name">up</div> <div class="code-name">#nut-icon-up</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-save"></use> </svg> <div class="name">save</div> <div class="code-name">#nut-icon-save</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-horizontal-n"></use> </svg> <div class="name">horizontal-n</div> <div class="code-name">#nut-icon-horizontal-n</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-ask"></use> </svg> <div class="name">ask</div> <div class="code-name">#nut-icon-ask</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-check-disabled"></use> </svg> <div class="name">check-disabled</div> <div class="code-name">#nut-icon-check-disabled</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-bookmark"></use> </svg> <div class="name">bookmark</div> <div class="code-name">#nut-icon-bookmark</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-check-normal"></use> </svg> <div class="name">check-normal</div> <div class="code-name">#nut-icon-check-normal</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-close-little"></use> </svg> <div class="name">close-little</div> <div class="code-name">#nut-icon-close-little</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-date"></use> </svg> <div class="name">date</div> <div class="code-name">#nut-icon-date</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-edit"></use> </svg> <div class="name">edit</div> <div class="code-name">#nut-icon-edit</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-checked"></use> </svg> <div class="name">checked</div> <div class="code-name">#nut-icon-checked</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-del2"></use> </svg> <div class="name">del2</div> <div class="code-name">#nut-icon-del2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-copy-1"></use> </svg> <div class="name">copy-1</div> <div class="code-name">#nut-icon-copy-1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-home"></use> </svg> <div class="name">home</div> <div class="code-name">#nut-icon-home</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-filter"></use> </svg> <div class="name">filter</div> <div class="code-name">#nut-icon-filter</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-download"></use> </svg> <div class="name">download</div> <div class="code-name">#nut-icon-download</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-copy"></use> </svg> <div class="name">copy</div> <div class="code-name">#nut-icon-copy</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-image"></use> </svg> <div class="name">image</div> <div class="code-name">#nut-icon-image</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-add"></use> </svg> <div class="name">add</div> <div class="code-name">#nut-icon-add</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#nut-icon-mask-close"></use> </svg> <div class="name">mask-close</div> <div class="code-name">#nut-icon-mask-close</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-h