@sumdoo/sumdoo-ui

<!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>  <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=2338269" 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 sd-iconfont"></span> <div class="name">收起键盘</div> <div class="code-name">&#xe61c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">暂无数据</div> <div class="code-name">&#xe61a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">eye</div> <div class="code-name">&#xe78f;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">eye-close</div> <div class="code-name">&#xe8ff;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">checkbox</div> <div class="code-name">&#xe727;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">checkbox-checked</div> <div class="code-name">&#xe658;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">page-refresh</div> <div class="code-name">&#xe672;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">delete_light</div> <div class="code-name">&#xe7ed;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">delete-fill</div> <div class="code-name">&#xe7ce;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe711;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe614;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe619;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">scan</div> <div class="code-name">&#xe69a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">我的优惠券</div> <div class="code-name">&#xe65a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">优惠券</div> <div class="code-name">&#xe69b;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">id-card-4</div> <div class="code-name">&#xe638;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">qrcode</div> <div class="code-name">&#xe7dd;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">message-square-outli</div> <div class="code-name">&#xe685;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">就诊打折</div> <div class="code-name">&#xe6a0;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">link</div> <div class="code-name">&#xe676;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">失效二维码</div> <div class="code-name">&#xe6b1;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">good-job</div> <div class="code-name">&#xe6a5;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">good-job-o</div> <div class="code-name">&#xe6a6;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">收藏</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">notice</div> <div class="code-name">&#xe70a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">heart</div> <div class="code-name">&#xe7df;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">heart-fill</div> <div class="code-name">&#xe849;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">收藏</div> <div class="code-name">&#xeca7;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">clcok</div> <div class="code-name">&#xeb1c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">clcok-fill</div> <div class="code-name">&#xeb2b;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Notice</div> <div class="code-name">&#xe62c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">分享</div> <div class="code-name">&#xe62d;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">phone-fill</div> <div class="code-name">&#xe6aa;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">24gf-store2</div> <div class="code-name">&#xe83d;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">storefront-outline</div> <div class="code-name">&#xea2a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">user_01</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe6e1;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe684;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">user-add</div> <div class="code-name">&#xe912;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">settings_light</div> <div class="code-name">&#xe7f9;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">calendar</div> <div class="code-name">&#xe717;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">top</div> <div class="code-name">&#xe69e;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">more</div> <div class="code-name">&#xe710;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">refresh</div> <div class="code-name">&#xe6a2;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">photo</div> <div class="code-name">&#xe655;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">sorting</div> <div class="code-name">&#xe766;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">photo-o</div> <div class="code-name">&#xe6ae;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">photo-fail</div> <div class="code-name">&#xe67e;</div> </li> <li class="dib"> <span class="icon sd-iconfont">轢</span> <div class="name">top</div> <div class="code-name">&#xf98d;</div> </li> <li class="dib"> <span class="icon sd-iconfont">年</span> <div class="name">top</div> <div class="code-name">&#xf98e;</div> </li> <li class="dib"> <span class="icon sd-iconfont">憐</span> <div class="name">top</div> <div class="code-name">&#xf98f;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">info-circle-solid</div> <div class="code-name">&#xe6dc;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">question-circle-solid</div> <div class="code-name">&#xe73a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">radio button unselect</div> <div class="code-name">&#xe6ed;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">radio button select</div> <div class="code-name">&#xe6ee;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">checkbox</div> <div class="code-name">&#xe677;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">check-circle-o</div> <div class="code-name">&#xe617;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">check-circle</div> <div class="code-name">&#xe618;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">icon_fail_popup</div> <div class="code-name">&#xe82c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">fail</div> <div class="code-name">&#xe6a1;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">配送</div> <div class="code-name">&#xe615;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">mc-icon-arrow down-filled</div> <div class="code-name">&#xe670;</div> </li> <li class="dib"> <span class="icon sd-iconfont">力</span> <div class="name">mc-icon-arrow down-filled</div> <div class="code-name">&#xf98a;</div> </li> <li class="dib"> <span class="icon sd-iconfont">曆</span> <div class="name">mc-icon-arrow down-filled</div> <div class="code-name">&#xf98b;</div> </li> <li class="dib"> <span class="icon sd-iconfont">歷</span> <div class="name">mc-icon-arrow down-filled</div> <div class="code-name">&#xf98c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe613;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Scan eCard2</div> <div class="code-name">&#xe659;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Bills</div> <div class="code-name">&#xe67a;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">map</div> <div class="code-name">&#xe611;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">aliPay</div> <div class="code-name">&#xe610;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">wechart</div> <div class="code-name">&#xe7d6;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">退格</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">shopcar</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">辣椒</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">dish</div> <div class="code-name">&#xe66f;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">tag</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe683;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">carema</div> <div class="code-name">&#xe608;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">volume</div> <div class="code-name">&#xe67b;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">video</div> <div class="code-name">&#xe693;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">subtract</div> <div class="code-name">&#xe60b;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Log file upload</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon sd-iconfont">黎</span> <div class="name">Log file upload</div> <div class="code-name">&#xf989;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">clock</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">help circle o</div> <div class="code-name">&#xe74f;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">MAP PIN</div> <div class="code-name">&#xe616;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">download</div> <div class="code-name">&#xe699;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">check</div> <div class="code-name">&#xe60c;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">add circle</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">loading-2</div> <div class="code-name">&#xe966;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Loading (1)</div> <div class="code-name">&#xe603;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">sub-circle</div> <div class="code-name">&#xe716;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Check Circle</div> <div class="code-name">&#xe66e;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">Arrow Up</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">phone, call, contact</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon sd-iconfont"></span> <div class="name">oa-t-oa-t-upload</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon sd-iconfont">閭</span> <div class="name">Arrow Up</div> <div class="code-name">&#xf986;</div> </li> <li class="dib"> <span class="icon sd-iconfont">驪</span> <div class="name">Arrow Up</div> <div class="code-name">&#xf987;</div> </li> <li class="dib"> <span class="icon sd-iconfont">麗</span> <div class="name">Arrow Up</div> <div class="code-name">&#xf988;</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: 'sd-iconfont'; src: url('iconfont.woff2?t=1642665513018') format('woff2'), url('iconfont.woff?t=1642665513018') format('woff'), url('iconfont.ttf?t=1642665513018') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.sd-iconfont { font-family: "sd-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="sd-iconfont">&#x33;</span> </code></pre> <blockquote> <p>"sd-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 sd-iconfont sd-icon-number-keyboard"></span> <div class="name"> 收起键盘 </div> <div class="code-name">.sd-icon-number-keyboard </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-list-empty"></span> <div class="name"> 暂无数据 </div> <div class="code-name">.sd-icon-list-empty </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-eye-open"></span> <div class="name"> eye </div> <div class="code-name">.sd-icon-eye-open </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-eye-close"></span> <div class="name"> eye-close </div> <div class="code-name">.sd-icon-eye-close </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-checkbox-normal"></span> <div class="name"> checkbox </div> <div class="code-name">.sd-icon-checkbox-normal </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-checkbox-checked"></span> <div class="name"> checkbox-checked </div> <div class="code-name">.sd-icon-checkbox-checked </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-page_refresh"></span> <div class="name"> page-refresh </div> <div class="code-name">.sd-icon-page_refresh </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-delete"></span> <div class="name"> delete_light </div> <div class="code-name">.sd-icon-delete </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-delete-fill"></span> <div class="name"> delete-fill </div> <div class="code-name">.sd-icon-delete-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-close-circle"></span> <div class="name"> close </div> <div class="code-name">.sd-icon-close-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-close"></span> <div class="name"> close </div> <div class="code-name">.sd-icon-close </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-close-circle-fill"></span> <div class="name"> close </div> <div class="code-name">.sd-icon-close-circle-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-scan"></span> <div class="name"> scan </div> <div class="code-name">.sd-icon-scan </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-coupon"></span> <div class="name"> 我的优惠券 </div> <div class="code-name">.sd-icon-coupon </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-coupon-fill"></span> <div class="name"> 优惠券 </div> <div class="code-name">.sd-icon-coupon-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-idcard"></span> <div class="name"> id-card-4 </div> <div class="code-name">.sd-icon-idcard </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-qr"></span> <div class="name"> qrcode </div> <div class="code-name">.sd-icon-qr </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-msg"></span> <div class="name"> message-square-outli </div> <div class="code-name">.sd-icon-msg </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-discount"></span> <div class="name"> 就诊打折 </div> <div class="code-name">.sd-icon-discount </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-link"></span> <div class="name"> link </div> <div class="code-name">.sd-icon-link </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-qr-invalid"></span> <div class="name"> 失效二维码 </div> <div class="code-name">.sd-icon-qr-invalid </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-good-job-fill"></span> <div class="name"> good-job </div> <div class="code-name">.sd-icon-good-job-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-good-job"></span> <div class="name"> good-job-o </div> <div class="code-name">.sd-icon-good-job </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-star-fill"></span> <div class="name"> 收藏 </div> <div class="code-name">.sd-icon-star-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-notice"></span> <div class="name"> notice </div> <div class="code-name">.sd-icon-notice </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-heart"></span> <div class="name"> heart </div> <div class="code-name">.sd-icon-heart </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-heart-fill"></span> <div class="name"> heart-fill </div> <div class="code-name">.sd-icon-heart-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-star"></span> <div class="name"> 收藏 </div> <div class="code-name">.sd-icon-star </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-clcok"></span> <div class="name"> clcok </div> <div class="code-name">.sd-icon-clcok </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-clock-fill"></span> <div class="name"> clcok-fill </div> <div class="code-name">.sd-icon-clock-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-notice-2"></span> <div class="name"> Notice </div> <div class="code-name">.sd-icon-notice-2 </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-share"></span> <div class="name"> 分享 </div> <div class="code-name">.sd-icon-share </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-phone-fill"></span> <div class="name"> phone-fill </div> <div class="code-name">.sd-icon-phone-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-store-fill"></span> <div class="name"> 24gf-store2 </div> <div class="code-name">.sd-icon-store-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-store"></span> <div class="name"> storefront-outline </div> <div class="code-name">.sd-icon-store </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-user-fill"></span> <div class="name"> user_01 </div> <div class="code-name">.sd-icon-user-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-user"></span> <div class="name"> user </div> <div class="code-name">.sd-icon-user </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-user-circle"></span> <div class="name"> user </div> <div class="code-name">.sd-icon-user-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-user-add"></span> <div class="name"> user-add </div> <div class="code-name">.sd-icon-user-add </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-setting"></span> <div class="name"> settings_light </div> <div class="code-name">.sd-icon-setting </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-date"></span> <div class="name"> calendar </div> <div class="code-name">.sd-icon-date </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-up"></span> <div class="name"> top </div> <div class="code-name">.sd-icon-up </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-more"></span> <div class="name"> more </div> <div class="code-name">.sd-icon-more </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-refresh"></span> <div class="name"> refresh </div> <div class="code-name">.sd-icon-refresh </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-photo-fill"></span> <div class="name"> photo </div> <div class="code-name">.sd-icon-photo-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-sort"></span> <div class="name"> sorting </div> <div class="code-name">.sd-icon-sort </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-photo"></span> <div class="name"> photo-o </div> <div class="code-name">.sd-icon-photo </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-photo-fail"></span> <div class="name"> photo-fail </div> <div class="code-name">.sd-icon-photo-fail </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-right"></span> <div class="name"> top </div> <div class="code-name">.sd-icon-right </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-down"></span> <div class="name"> top </div> <div class="code-name">.sd-icon-down </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-left"></span> <div class="name"> top </div> <div class="code-name">.sd-icon-left </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-info-circle"></span> <div class="name"> info-circle-solid </div> <div class="code-name">.sd-icon-info-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-ask-circle"></span> <div class="name"> question-circle-solid </div> <div class="code-name">.sd-icon-ask-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-check-hollow"></span> <div class="name"> radio button unselect </div> <div class="code-name">.sd-icon-check-hollow </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-check-solid"></span> <div class="name"> radio button select </div> <div class="code-name">.sd-icon-check-solid </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-success"></span> <div class="name"> checkbox </div> <div class="code-name">.sd-icon-success </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-success-circle"></span> <div class="name"> check-circle-o </div> <div class="code-name">.sd-icon-success-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-success-circle-fill"></span> <div class="name"> check-circle </div> <div class="code-name">.sd-icon-success-circle-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-fail-circle"></span> <div class="name"> icon_fail_popup </div> <div class="code-name">.sd-icon-fail-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-fail"></span> <div class="name"> fail </div> <div class="code-name">.sd-icon-fail </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-takeout-delivery"></span> <div class="name"> 配送 </div> <div class="code-name">.sd-icon-takeout-delivery </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-arrow-down-triangle"></span> <div class="name"> mc-icon-arrow down-filled </div> <div class="code-name">.sd-icon-arrow-down-triangle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-arrow-left-triangle"></span> <div class="name"> mc-icon-arrow down-filled </div> <div class="code-name">.sd-icon-arrow-left-triangle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-arrow-up-triangle"></span> <div class="name"> mc-icon-arrow down-filled </div> <div class="code-name">.sd-icon-arrow-up-triangle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-arrow-right-triangle"></span> <div class="name"> mc-icon-arrow down-filled </div> <div class="code-name">.sd-icon-arrow-right-triangle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.sd-icon-edit </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-scan-qrcode"></span> <div class="name"> Scan eCard2 </div> <div class="code-name">.sd-icon-scan-qrcode </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-bills"></span> <div class="name"> Bills </div> <div class="code-name">.sd-icon-bills </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-map-marked"></span> <div class="name"> map </div> <div class="code-name">.sd-icon-map-marked </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-alipay"></span> <div class="name"> aliPay </div> <div class="code-name">.sd-icon-alipay </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-wechat-pay"></span> <div class="name"> wechart </div> <div class="code-name">.sd-icon-wechat-pay </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-back-off"></span> <div class="name"> 退格 </div> <div class="code-name">.sd-icon-back-off </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-shopcar-fill"></span> <div class="name"> shopcar </div> <div class="code-name">.sd-icon-shopcar-fill </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-pungency"></span> <div class="name"> 辣椒 </div> <div class="code-name">.sd-icon-pungency </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-dish"></span> <div class="name"> dish </div> <div class="code-name">.sd-icon-dish </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-tag"></span> <div class="name"> tag </div> <div class="code-name">.sd-icon-tag </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-plus-bold"></span> <div class="name"> add </div> <div class="code-name">.sd-icon-plus-bold </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-carema"></span> <div class="name"> carema </div> <div class="code-name">.sd-icon-carema </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-volume-plus"></span> <div class="name"> volume </div> <div class="code-name">.sd-icon-volume-plus </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-video"></span> <div class="name"> video </div> <div class="code-name">.sd-icon-video </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-minus-bold"></span> <div class="name"> subtract </div> <div class="code-name">.sd-icon-minus-bold </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-download"></span> <div class="name"> Log file upload </div> <div class="code-name">.sd-icon-download </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-upload"></span> <div class="name"> Log file upload </div> <div class="code-name">.sd-icon-upload </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-clock"></span> <div class="name"> clock </div> <div class="code-name">.sd-icon-clock </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-help-circle"></span> <div class="name"> help circle o </div> <div class="code-name">.sd-icon-help-circle </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-location"></span> <div class="name"> MAP PIN </div> <div class="code-name">.sd-icon-location </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-download-cloud"></span> <div class="name"> download </div> <div class="code-name">.sd-icon-download-cloud </div> </li> <li class="dib"> <span class="icon sd-iconfont sd-icon-check"></span> <div class="name"> check </div> <div class=