mix-ui

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont Demo</title> <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> <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> </head> <body> <div class="main"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></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=2081446" 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 wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xe634;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">img_gonggao@2x</div> <div class="code-name">&#xe635;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告栏</div> <div class="code-name">&#xe6d5;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xe6b7;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xecb5;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xe792;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告@2x</div> <div class="code-name">&#xe636;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xe6f4;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">公告</div> <div class="code-name">&#xe632;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">通知公告</div> <div class="code-name">&#xe633;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">刷新</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">clear</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe62c;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">checked</div> <div class="code-name">&#xe62d;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">info-o</div> <div class="code-name">&#xe62e;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe62f;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">passed</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe629;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">add-o</div> <div class="code-name">&#xe62a;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">arrow-up</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">arrow-down</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">arrow-left</div> <div class="code-name">&#xe603;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">cart</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">cart-o</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">cross</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">fail</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">ellipsis</div> <div class="code-name">&#xe608;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">hot</div> <div class="code-name">&#xe609;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">hot-o</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">hot-sale</div> <div class="code-name">&#xe60b;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">new-arrival-o</div> <div class="code-name">&#xe60c;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">more-o</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">new-arrival</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">like</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">more</div> <div class="code-name">&#xe610;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">like-o</div> <div class="code-name">&#xe611;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">phone-o</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">phone</div> <div class="code-name">&#xe613;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">hot-sale-o</div> <div class="code-name">&#xe614;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">lock</div> <div class="code-name">&#xe615;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">qr-invalid</div> <div class="code-name">&#xe616;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">empty</div> <div class="code-name">&#xe617;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe618;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">plus</div> <div class="code-name">&#xe619;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">question-o</div> <div class="code-name">&#xe61a;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">setting-o</div> <div class="code-name">&#xe61b;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">setting</div> <div class="code-name">&#xe61c;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">star-o</div> <div class="code-name">&#xe61d;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">shop</div> <div class="code-name">&#xe61e;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">qr</div> <div class="code-name">&#xe61f;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">scan</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">shop-o</div> <div class="code-name">&#xe621;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">shopping-cart-o</div> <div class="code-name">&#xe622;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">user-o</div> <div class="code-name">&#xe623;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">warning-o</div> <div class="code-name">&#xe624;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">warn-o</div> <div class="code-name">&#xe625;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">shopping-cart</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">success</div> <div class="code-name">&#xe627;</div> </li> <li class="dib"> <span class="icon wb-iconfont"></span> <div class="name">star</div> <div class="code-name">&#xe628;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <ul> <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> <li>支持按字体的方式去动态调整图标大小，颜色等等。</li> <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> </ul> <blockquote> <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> </blockquote> <p>Unicode 使用步骤如下：</p> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <pre><code class="language-css" >@font-face { font-family: 'wb-iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#wb-iconfont') format('svg'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.wb-iconfont { font-family: "wb-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="wb-iconfont">&#x33;</span> </code></pre> <blockquote> <p>"wb-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 wb-iconfont wb-icon-gonggao3"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao3 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao2"></span> <div class="name"> img_gonggao@2x </div> <div class="code-name">.wb-icon-gonggao2 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao7"></span> <div class="name"> 公告栏 </div> <div class="code-name">.wb-icon-gonggao7 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao4"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao4 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao5"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao5 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao6"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao6 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao9"></span> <div class="name"> 公告@2x </div> <div class="code-name">.wb-icon-gonggao9 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao8"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao8 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao1"></span> <div class="name"> 公告 </div> <div class="code-name">.wb-icon-gonggao1 </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-gonggao"></span> <div class="name"> 通知公告 </div> <div class="code-name">.wb-icon-gonggao </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-refresh"></span> <div class="name"> 刷新 </div> <div class="code-name">.wb-icon-refresh </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-close"></span> <div class="name"> clear </div> <div class="code-name">.wb-icon-close </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-close-o"></span> <div class="name"> close </div> <div class="code-name">.wb-icon-close-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-passed"></span> <div class="name"> checked </div> <div class="code-name">.wb-icon-passed </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-info-o"></span> <div class="name"> info-o </div> <div class="code-name">.wb-icon-info-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-info"></span> <div class="name"> info </div> <div class="code-name">.wb-icon-info </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-passed-o"></span> <div class="name"> passed </div> <div class="code-name">.wb-icon-passed-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-add"></span> <div class="name"> add </div> <div class="code-name">.wb-icon-add </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-add-o"></span> <div class="name"> add-o </div> <div class="code-name">.wb-icon-add-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-arrow"></span> <div class="name"> arrow </div> <div class="code-name">.wb-icon-arrow </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-arrow-up"></span> <div class="name"> arrow-up </div> <div class="code-name">.wb-icon-arrow-up </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-arrow-down"></span> <div class="name"> arrow-down </div> <div class="code-name">.wb-icon-arrow-down </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-arrow-left"></span> <div class="name"> arrow-left </div> <div class="code-name">.wb-icon-arrow-left </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-cart"></span> <div class="name"> cart </div> <div class="code-name">.wb-icon-cart </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-cart-o"></span> <div class="name"> cart-o </div> <div class="code-name">.wb-icon-cart-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-cross"></span> <div class="name"> cross </div> <div class="code-name">.wb-icon-cross </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-fail"></span> <div class="name"> fail </div> <div class="code-name">.wb-icon-fail </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-ellipsis"></span> <div class="name"> ellipsis </div> <div class="code-name">.wb-icon-ellipsis </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-hot"></span> <div class="name"> hot </div> <div class="code-name">.wb-icon-hot </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-hot-o"></span> <div class="name"> hot-o </div> <div class="code-name">.wb-icon-hot-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-hot-sale"></span> <div class="name"> hot-sale </div> <div class="code-name">.wb-icon-hot-sale </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-new-arrival-o"></span> <div class="name"> new-arrival-o </div> <div class="code-name">.wb-icon-new-arrival-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-more-o"></span> <div class="name"> more-o </div> <div class="code-name">.wb-icon-more-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-new-arrival"></span> <div class="name"> new-arrival </div> <div class="code-name">.wb-icon-new-arrival </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-like"></span> <div class="name"> like </div> <div class="code-name">.wb-icon-like </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-more"></span> <div class="name"> more </div> <div class="code-name">.wb-icon-more </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-like-o"></span> <div class="name"> like-o </div> <div class="code-name">.wb-icon-like-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-phone-o"></span> <div class="name"> phone-o </div> <div class="code-name">.wb-icon-phone-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-phone"></span> <div class="name"> phone </div> <div class="code-name">.wb-icon-phone </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-hot-sale-o"></span> <div class="name"> hot-sale-o </div> <div class="code-name">.wb-icon-hot-sale-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-lock"></span> <div class="name"> lock </div> <div class="code-name">.wb-icon-lock </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-qr-invalid"></span> <div class="name"> qr-invalid </div> <div class="code-name">.wb-icon-qr-invalid </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-empty"></span> <div class="name"> empty </div> <div class="code-name">.wb-icon-empty </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-search"></span> <div class="name"> search </div> <div class="code-name">.wb-icon-search </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-plus"></span> <div class="name"> plus </div> <div class="code-name">.wb-icon-plus </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-question-o"></span> <div class="name"> question-o </div> <div class="code-name">.wb-icon-question-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-setting-o"></span> <div class="name"> setting-o </div> <div class="code-name">.wb-icon-setting-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-setting"></span> <div class="name"> setting </div> <div class="code-name">.wb-icon-setting </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-star-o"></span> <div class="name"> star-o </div> <div class="code-name">.wb-icon-star-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-shop"></span> <div class="name"> shop </div> <div class="code-name">.wb-icon-shop </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-qr"></span> <div class="name"> qr </div> <div class="code-name">.wb-icon-qr </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-scan"></span> <div class="name"> scan </div> <div class="code-name">.wb-icon-scan </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-shop-o"></span> <div class="name"> shop-o </div> <div class="code-name">.wb-icon-shop-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-shopping-cart-o"></span> <div class="name"> shopping-cart-o </div> <div class="code-name">.wb-icon-shopping-cart-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-user-o"></span> <div class="name"> user-o </div> <div class="code-name">.wb-icon-user-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-warning-o"></span> <div class="name"> warning-o </div> <div class="code-name">.wb-icon-warning-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-warn-o"></span> <div class="name"> warn-o </div> <div class="code-name">.wb-icon-warn-o </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-shopping-cart"></span> <div class="name"> shopping-cart </div> <div class="code-name">.wb-icon-shopping-cart </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-success"></span> <div class="name"> success </div> <div class="code-name">.wb-icon-success </div> </li> <li class="dib"> <span class="icon wb-iconfont wb-icon-star"></span> <div class="name"> star </div> <div class="code-name">.wb-icon-star </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>兼容性良好，支持 IE8+，及所有现代浏览器。</li> <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</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="wb-iconfont wb-icon-xxx"></span> </code></pre> <blockquote> <p>" wb-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="#wb-icon-gonggao3"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao3</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao2"></use> </svg> <div class="name">img_gonggao@2x</div> <div class="code-name">#wb-icon-gonggao2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao7"></use> </svg> <div class="name">公告栏</div> <div class="code-name">#wb-icon-gonggao7</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao4"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao4</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao5"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao5</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao6"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao6</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao9"></use> </svg> <div class="name">公告@2x</div> <div class="code-name">#wb-icon-gonggao9</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao8"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao8</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao1"></use> </svg> <div class="name">公告</div> <div class="code-name">#wb-icon-gonggao1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-gonggao"></use> </svg> <div class="name">通知公告</div> <div class="code-name">#wb-icon-gonggao</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-refresh"></use> </svg> <div class="name">刷新</div> <div class="code-name">#wb-icon-refresh</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-close"></use> </svg> <div class="name">clear</div> <div class="code-name">#wb-icon-close</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-close-o"></use> </svg> <div class="name">close</div> <div class="code-name">#wb-icon-close-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-passed"></use> </svg> <div class="name">checked</div> <div class="code-name">#wb-icon-passed</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-info-o"></use> </svg> <div class="name">info-o</div> <div class="code-name">#wb-icon-info-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-info"></use> </svg> <div class="name">info</div> <div class="code-name">#wb-icon-info</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-passed-o"></use> </svg> <div class="name">passed</div> <div class="code-name">#wb-icon-passed-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-add"></use> </svg> <div class="name">add</div> <div class="code-name">#wb-icon-add</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-add-o"></use> </svg> <div class="name">add-o</div> <div class="code-name">#wb-icon-add-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-arrow"></use> </svg> <div class="name">arrow</div> <div class="code-name">#wb-icon-arrow</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-arrow-up"></use> </svg> <div class="name">arrow-up</div> <div class="code-name">#wb-icon-arrow-up</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-arrow-down"></use> </svg> <div class="name">arrow-down</div> <div class="code-name">#wb-icon-arrow-down</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-arrow-left"></use> </svg> <div class="name">arrow-left</div> <div class="code-name">#wb-icon-arrow-left</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-cart"></use> </svg> <div class="name">cart</div> <div class="code-name">#wb-icon-cart</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-cart-o"></use> </svg> <div class="name">cart-o</div> <div class="code-name">#wb-icon-cart-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-cross"></use> </svg> <div class="name">cross</div> <div class="code-name">#wb-icon-cross</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-fail"></use> </svg> <div class="name">fail</div> <div class="code-name">#wb-icon-fail</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-ellipsis"></use> </svg> <div class="name">ellipsis</div> <div class="code-name">#wb-icon-ellipsis</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-hot"></use> </svg> <div class="name">hot</div> <div class="code-name">#wb-icon-hot</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-hot-o"></use> </svg> <div class="name">hot-o</div> <div class="code-name">#wb-icon-hot-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-hot-sale"></use> </svg> <div class="name">hot-sale</div> <div class="code-name">#wb-icon-hot-sale</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-new-arrival-o"></use> </svg> <div class="name">new-arrival-o</div> <div class="code-name">#wb-icon-new-arrival-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-more-o"></use> </svg> <div class="name">more-o</div> <div class="code-name">#wb-icon-more-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-new-arrival"></use> </svg> <div class="name">new-arrival</div> <div class="code-name">#wb-icon-new-arrival</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-like"></use> </svg> <div class="name">like</div> <div class="code-name">#wb-icon-like</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-more"></use> </svg> <div class="name">more</div> <div class="code-name">#wb-icon-more</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-like-o"></use> </svg> <div class="name">like-o</div> <div class="code-name">#wb-icon-like-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-phone-o"></use> </svg> <div class="name">phone-o</div> <div class="code-name">#wb-icon-phone-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-phone"></use> </svg> <div class="name">phone</div> <div class="code-name">#wb-icon-phone</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-hot-sale-o"></use> </svg> <div class="name">hot-sale-o</div> <div class="code-name">#wb-icon-hot-sale-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-lock"></use> </svg> <div class="name">lock</div> <div class="code-name">#wb-icon-lock</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-qr-invalid"></use> </svg> <div class="name">qr-invalid</div> <div class="code-name">#wb-icon-qr-invalid</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-empty"></use> </svg> <div class="name">empty</div> <div class="code-name">#wb-icon-empty</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-search"></use> </svg> <div class="name">search</div> <div class="code-name">#wb-icon-search</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-plus"></use> </svg> <div class="name">plus</div> <div class="code-name">#wb-icon-plus</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-question-o"></use> </svg> <div class="name">question-o</div> <div class="code-name">#wb-icon-question-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-setting-o"></use> </svg> <div class="name">setting-o</div> <div class="code-name">#wb-icon-setting-o</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-setting"></use> </svg> <div class="name">setting</div> <div class="code-name">#wb-icon-setting</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#wb-icon-star-o"></use> </svg> <div class="name">star