tplus-mobilelogin

<!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=1385542" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont"></span> <div class="name">选企业</div> <div class="code-name">&#xe7d8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">添加</div> <div class="code-name">&#xe69b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">删除</div> <div class="code-name">&#xe7ca;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">展开</div> <div class="code-name">&#xe848;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">收起</div> <div class="code-name">&#xe849;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">xietong</div> <div class="code-name">&#xe847;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">收起</div> <div class="code-name">&#xe845;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">展开</div> <div class="code-name">&#xe846;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dl_erweima</div> <div class="code-name">&#xe7e7;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">icon_mima.svg</div> <div class="code-name">&#xe843;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">icon_zhanghao</div> <div class="code-name">&#xe844;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">畅捷通logo</div> <div class="code-name">&#xe842;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">日历</div> <div class="code-name">&#xe68d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">caigoufang</div> <div class="code-name">&#xe83d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">gonghuofang</div> <div class="code-name">&#xe83f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">畅捷通</div> <div class="code-name">&#xe841;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">企业协同</div> <div class="code-name">&#xe840;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">xuanzhong</div> <div class="code-name">&#xe83c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">touxiang</div> <div class="code-name">&#xe83e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">扫描</div> <div class="code-name">&#xe83b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">Shape</div> <div class="code-name">&#xe83a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">选中_已发货</div> <div class="code-name">&#xe835;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">待确认</div> <div class="code-name">&#xe836;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">选中_待确认</div> <div class="code-name">&#xe837;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">已发货</div> <div class="code-name">&#xe839;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">司机</div> <div class="code-name">&#xe832;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">已中标</div> <div class="code-name">&#xe833;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">资质</div> <div class="code-name">&#xe820;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">tuichu</div> <div class="code-name">&#xe821;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">修改</div> <div class="code-name">&#xe822;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">已入库</div> <div class="code-name">&#xe823;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">weifahuo</div> <div class="code-name">&#xe824;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dayinji</div> <div class="code-name">&#xe825;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">danwei</div> <div class="code-name">&#xe826;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">未发货_点击态</div> <div class="code-name">&#xe827;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">报价_点击态</div> <div class="code-name">&#xe828;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">已中标_点击态</div> <div class="code-name">&#xe829;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">已入库_点击态</div> <div class="code-name">&#xe82a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">协同企业</div> <div class="code-name">&#xe82b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">上传</div> <div class="code-name">&#xe82c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">报价</div> <div class="code-name">&#xe82d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">serch_icon</div> <div class="code-name">&#xe82e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">未入库</div> <div class="code-name">&#xe82f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">未入库_点击态</div> <div class="code-name">&#xe830;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">zhangtao</div> <div class="code-name">&#xe831;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">kongdingdan</div> <div class="code-name">&#xe6dd;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">zaitu</div> <div class="code-name">&#xe722;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">qianshou</div> <div class="code-name">&#xe721;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">danjubianhao</div> <div class="code-name">&#xe720;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">morentouxiang</div> <div class="code-name">&#xe71f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">xuanzhong</div> <div class="code-name">&#xe71e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">kuaidi</div> <div class="code-name">&#xe71c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dingwei</div> <div class="code-name">&#xe71d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">订单详情</div> <div class="code-name">&#xe71a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">订单</div> <div class="code-name">&#xe71b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">zhankai</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">上</div> <div class="code-name">&#xe63c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">下</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">Bars</div> <div class="code-name">&#xe719;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">search </div> <div class="code-name">&#xe716;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">xiaochengxu_guanbi</div> <div class="code-name">&#xe717;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">fanhui</div> <div class="code-name">&#xe718;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">wode</div> <div class="code-name">&#xe710;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">fahuozhong_dianji</div> <div class="code-name">&#xe711;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dingdan_dianji</div> <div class="code-name">&#xe712;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">wode_dianji</div> <div class="code-name">&#xe713;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">dingdan</div> <div class="code-name">&#xe714;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">fahuozhong</div> <div class="code-name">&#xe715;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <ul> <li>支持按字体的方式去动态调整图标大小，颜色等等。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> </ul> <blockquote> <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> </blockquote> <p>Unicode 使用步骤如下：</p> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <pre><code class="language-css" >@font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1656656904834') format('woff2'), url('iconfont.woff?t=1656656904834') format('woff'), url('iconfont.ttf?t=1656656904834') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <pre> <code class="language-html" ><span class="iconfont">&#x33;</span> </code></pre> <blockquote> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content font-class"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont iconxuanqiye"></span> <div class="name"> 选企业 </div> <div class="code-name">.iconxuanqiye </div> </li> <li class="dib"> <span class="icon iconfont icontianjia"></span> <div class="name"> 添加 </div> <div class="code-name">.icontianjia </div> </li> <li class="dib"> <span class="icon iconfont iconshanchu"></span> <div class="name"> 删除 </div> <div class="code-name">.iconshanchu </div> </li> <li class="dib"> <span class="icon iconfont iconzhankai2"></span> <div class="name"> 展开 </div> <div class="code-name">.iconzhankai2 </div> </li> <li class="dib"> <span class="icon iconfont iconshouqi1"></span> <div class="name"> 收起 </div> <div class="code-name">.iconshouqi1 </div> </li> <li class="dib"> <span class="icon iconfont iconxietong"></span> <div class="name"> xietong </div> <div class="code-name">.iconxietong </div> </li> <li class="dib"> <span class="icon iconfont iconshouqi"></span> <div class="name"> 收起 </div> <div class="code-name">.iconshouqi </div> </li> <li class="dib"> <span class="icon iconfont iconzhankai1"></span> <div class="name"> 展开 </div> <div class="code-name">.iconzhankai1 </div> </li> <li class="dib"> <span class="icon iconfont icontplusappqrcode"></span> <div class="name"> dl_erweima </div> <div class="code-name">.icontplusappqrcode </div> </li> <li class="dib"> <span class="icon iconfont icona-icon_mimasvg"></span> <div class="name"> icon_mima.svg </div> <div class="code-name">.icona-icon_mimasvg </div> </li> <li class="dib"> <span class="icon iconfont iconicon_zhanghao"></span> <div class="name"> icon_zhanghao </div> <div class="code-name">.iconicon_zhanghao </div> </li> <li class="dib"> <span class="icon iconfont iconchangjietonglogo"></span> <div class="name"> 畅捷通logo </div> <div class="code-name">.iconchangjietonglogo </div> </li> <li class="dib"> <span class="icon iconfont iconrili"></span> <div class="name"> 日历 </div> <div class="code-name">.iconrili </div> </li> <li class="dib"> <span class="icon iconfont iconcaigoufang"></span> <div class="name"> caigoufang </div> <div class="code-name">.iconcaigoufang </div> </li> <li class="dib"> <span class="icon iconfont icongonghuofang"></span> <div class="name"> gonghuofang </div> <div class="code-name">.icongonghuofang </div> </li> <li class="dib"> <span class="icon iconfont iconchangjietong"></span> <div class="name"> 畅捷通 </div> <div class="code-name">.iconchangjietong </div> </li> <li class="dib"> <span class="icon iconfont iconqiyexietong"></span> <div class="name"> 企业协同 </div> <div class="code-name">.iconqiyexietong </div> </li> <li class="dib"> <span class="icon iconfont iconxuanzhong1"></span> <div class="name"> xuanzhong </div> <div class="code-name">.iconxuanzhong1 </div> </li> <li class="dib"> <span class="icon iconfont icontouxiang"></span> <div class="name"> touxiang </div> <div class="code-name">.icontouxiang </div> </li> <li class="dib"> <span class="icon iconfont icona-saomiaocopy"></span> <div class="name"> 扫描 </div> <div class="code-name">.icona-saomiaocopy </div> </li> <li class="dib"> <span class="icon iconfont icona-Shapebeifen6"></span> <div class="name"> Shape </div> <div class="code-name">.icona-Shapebeifen6 </div> </li> <li class="dib"> <span class="icon iconfont iconxuanzhong_yifahuo"></span> <div class="name"> 选中_已发货 </div> <div class="code-name">.iconxuanzhong_yifahuo </div> </li> <li class="dib"> <span class="icon iconfont icondaiqueren"></span> <div class="name"> 待确认 </div> <div class="code-name">.icondaiqueren </div> </li> <li class="dib"> <span class="icon iconfont iconxuanzhong_daiqueren"></span> <div class="name"> 选中_待确认 </div> <div class="code-name">.iconxuanzhong_daiqueren </div> </li> <li class="dib"> <span class="icon iconfont iconyifahuo"></span> <div class="name"> 已发货 </div> <div class="code-name">.iconyifahuo </div> </li> <li class="dib"> <span class="icon iconfont iconsiji"></span> <div class="name"> 司机 </div> <div class="code-name">.iconsiji </div> </li> <li class="dib"> <span class="icon iconfont iconyizhongbiao"></span> <div class="name"> 已中标 </div> <div class="code-name">.iconyizhongbiao </div> </li> <li class="dib"> <span class="icon iconfont iconzizhi"></span> <div class="name"> 资质 </div> <div class="code-name">.iconzizhi </div> </li> <li class="dib"> <span class="icon iconfont icontuichu"></span> <div class="name"> tuichu </div> <div class="code-name">.icontuichu </div> </li> <li class="dib"> <span class="icon iconfont iconxiugai"></span> <div class="name"> 修改 </div> <div class="code-name">.iconxiugai </div> </li> <li class="dib"> <span class="icon iconfont iconyiruku"></span> <div class="name"> 已入库 </div> <div class="code-name">.iconyiruku </div> </li> <li class="dib"> <span class="icon iconfont iconweifahuo"></span> <div class="name"> weifahuo </div> <div class="code-name">.iconweifahuo </div> </li> <li class="dib"> <span class="icon iconfont icondayinji"></span> <div class="name"> dayinji </div> <div class="code-name">.icondayinji </div> </li> <li class="dib"> <span class="icon iconfont icondanwei"></span> <div class="name"> danwei </div> <div class="code-name">.icondanwei </div> </li> <li class="dib"> <span class="icon iconfont iconweifahuo_dianjitai"></span> <div class="name"> 未发货_点击态 </div> <div class="code-name">.iconweifahuo_dianjitai </div> </li> <li class="dib"> <span class="icon iconfont iconbaojia_dianjitai"></span> <div class="name"> 报价_点击态 </div> <div class="code-name">.iconbaojia_dianjitai </div> </li> <li class="dib"> <span class="icon iconfont iconyizhongbiao_dianjitai"></span> <div class="name"> 已中标_点击态 </div> <div class="code-name">.iconyizhongbiao_dianjitai </div> </li> <li class="dib"> <span class="icon iconfont iconyiruku_dianjitai"></span> <div class="name"> 已入库_点击态 </div> <div class="code-name">.iconyiruku_dianjitai </div> </li> <li class="dib"> <span class="icon iconfont iconxietongqiye"></span> <div class="name"> 协同企业 </div> <div class="code-name">.iconxietongqiye </div> </li> <li class="dib"> <span class="icon iconfont iconshangchuan"></span> <div class="name"> 上传 </div> <div class="code-name">.iconshangchuan </div> </li> <li class="dib"> <span class="icon iconfont iconbaojia"></span> <div class="name"> 报价 </div> <div class="code-name">.iconbaojia </div> </li> <li class="dib"> <span class="icon iconfont iconserch_icon"></span> <div class="name"> serch_icon </div> <div class="code-name">.iconserch_icon </div> </li> <li class="dib"> <span class="icon iconfont iconweiruku"></span> <div class="name"> 未入库 </div> <div class="code-name">.iconweiruku </div> </li> <li class="dib"> <span class="icon iconfont iconweiruku_dianjitai"></span> <div class="name"> 未入库_点击态 </div> <div class="code-name">.iconweiruku_dianjitai </div> </li> <li class="dib"> <span class="icon iconfont iconzhangtao"></span> <div class="name"> zhangtao </div> <div class="code-name">.iconzhangtao </div> </li> <li class="dib"> <span class="icon iconfont iconkongdingdan"></span> <div class="name"> kongdingdan </div> <div class="code-name">.iconkongdingdan </div> </li> <li class="dib"> <span class="icon iconfont iconzaitu"></span> <div class="name"> zaitu </div> <div class="code-name">.iconzaitu </div> </li> <li class="dib"> <span class="icon iconfont iconqianshou"></span> <div class="name"> qianshou </div> <div class="code-name">.iconqianshou </div> </li> <li class="dib"> <span class="icon iconfont icondanjubianhao"></span> <div class="name"> danjubianhao </div> <div class="code-name">.icondanjubianhao </div> </li> <li class="dib"> <span class="icon iconfont iconmorentouxiang"></span> <div class="name"> morentouxiang </div> <div class="code-name">.iconmorentouxiang </div> </li> <li class="dib"> <span class="icon iconfont iconxuanzhong"></span> <div class="name"> xuanzhong </div> <div class="code-name">.iconxuanzhong </div> </li> <li class="dib"> <span class="icon iconfont iconkuaidi"></span> <div class="name"> kuaidi </div> <div class="code-name">.iconkuaidi </div> </li> <li class="dib"> <span class="icon iconfont icondingwei"></span> <div class="name"> dingwei </div> <div class="code-name">.icondingwei </div> </li> <li class="dib"> <span class="icon iconfont icondingdanxiangqing"></span> <div class="name"> 订单详情 </div> <div class="code-name">.icondingdanxiangqing </div> </li> <li class="dib"> <span class="icon iconfont icondingdan1"></span> <div class="name"> 订单 </div> <div class="code-name">.icondingdan1 </div> </li> <li class="dib"> <span class="icon iconfont iconzhankai"></span> <div class="name"> zhankai </div> <div class="code-name">.iconzhankai </div> </li> <li class="dib"> <span class="icon iconfont iconshang"></span> <div class="name"> 上 </div> <div class="code-name">.iconshang </div> </li> <li class="dib"> <span class="icon iconfont iconxia"></span> <div class="name"> 下 </div> <div class="code-name">.iconxia </div> </li> <li class="dib"> <span class="icon iconfont iconBars"></span> <div class="name"> Bars </div> <div class="code-name">.iconBars </div> </li> <li class="dib"> <span class="icon iconfont iconsearch"></span> <div class="name"> search </div> <div class="code-name">.iconsearch </div> </li> <li class="dib"> <span class="icon iconfont iconxiaochengxu_guanbi"></span> <div class="name"> xiaochengxu_guanbi </div> <div class="code-name">.iconxiaochengxu_guanbi </div> </li> <li class="dib"> <span class="icon iconfont iconfanhui"></span> <div class="name"> fanhui </div> <div class="code-name">.iconfanhui </div> </li> <li class="dib"> <span class="icon iconfont iconwode"></span> <div class="name"> wode </div> <div class="code-name">.iconwode </div> </li> <li class="dib"> <span class="icon iconfont iconfahuozhong_dianji"></span> <div class="name"> fahuozhong_dianji </div> <div class="code-name">.iconfahuozhong_dianji </div> </li> <li class="dib"> <span class="icon iconfont icondingdan_dianji"></span> <div class="name"> dingdan_dianji </div> <div class="code-name">.icondingdan_dianji </div> </li> <li class="dib"> <span class="icon iconfont iconwode_dianji"></span> <div class="name"> wode_dianji </div> <div class="code-name">.iconwode_dianji </div> </li> <li class="dib"> <span class="icon iconfont icondingdan"></span> <div class="name"> dingdan </div> <div class="code-name">.icondingdan </div> </li> <li class="dib"> <span class="icon iconfont iconfahuozhong"></span> <div class="name"> fahuozhong </div> <div class="code-name">.iconfahuozhong </div> </li> </ul> <div class="article markdown"> <h2 id="font-class-">font-class 引用</h2> <hr> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> <p>与 Unicode 使用方式相比，具有如下特点：</p> <ul> <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> </ul> <p>使用步骤如下：</p> <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><span class="iconfont iconxxx"></span> </code></pre> <blockquote> <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content symbol"> <ul class="icon_lists dib-box"> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxuanqiye"></use> </svg> <div class="name">选企业</div> <div class="code-name">#iconxuanqiye</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icontianjia"></use> </svg> <div class="name">添加</div> <div class="code-name">#icontianjia</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconshanchu"></use> </svg> <div class="name">删除</div> <div class="code-name">#iconshanchu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconzhankai2"></use> </svg> <div class="name">展开</div> <div class="code-name">#iconzhankai2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconshouqi1"></use> </svg> <div class="name">收起</div> <div class="code-name">#iconshouqi1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxietong"></use> </svg> <div class="name">xietong</div> <div class="code-name">#iconxietong</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconshouqi"></use> </svg> <div class="name">收起</div> <div class="code-name">#iconshouqi</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconzhankai1"></use> </svg> <div class="name">展开</div> <div class="code-name">#iconzhankai1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icontplusappqrcode"></use> </svg> <div class="name">dl_erweima</div> <div class="code-name">#icontplusappqrcode</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icona-icon_mimasvg"></use> </svg> <div class="name">icon_mima.svg</div> <div class="code-name">#icona-icon_mimasvg</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconicon_zhanghao"></use> </svg> <div class="name">icon_zhanghao</div> <div class="code-name">#iconicon_zhanghao</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconchangjietonglogo"></use> </svg> <div class="name">畅捷通logo</div> <div class="code-name">#iconchangjietonglogo</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconrili"></use> </svg> <div class="name">日历</div> <div class="code-name">#iconrili</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconcaigoufang"></use> </svg> <div class="name">caigoufang</div> <div class="code-name">#iconcaigoufang</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icongonghuofang"></use> </svg> <div class="name">gonghuofang</div> <div class="code-name">#icongonghuofang</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconchangjietong"></use> </svg> <div class="name">畅捷通</div> <div class="code-name">#iconchangjietong</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconqiyexietong"></use> </svg> <div class="name">企业协同</div> <div class="code-name">#iconqiyexietong</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxuanzhong1"></use> </svg> <div class="name">xuanzhong</div> <div class="code-name">#iconxuanzhong1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icontouxiang"></use> </svg> <div class="name">touxiang</div> <div class="code-name">#icontouxiang</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icona-saomiaocopy"></use> </svg> <div class="name">扫描</div> <div class="code-name">#icona-saomiaocopy</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icona-Shapebeifen6"></use> </svg> <div class="name">Shape</div> <div class="code-name">#icona-Shapebeifen6</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxuanzhong_yifahuo"></use> </svg> <div class="name">选中_已发货</div> <div class="code-name">#iconxuanzhong_yifahuo</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icondaiqueren"></use> </svg> <div class="name">待确认</div> <div class="code-name">#icondaiqueren</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxuanzhong_daiqueren"></use> </svg> <div class="name">选中_待确认</div> <div class="code-name">#iconxuanzhong_daiqueren</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconyifahuo"></use> </svg> <div class="name">已发货</div> <div class="code-name">#iconyifahuo</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconsiji"></use> </svg> <div class="name">司机</div> <div class="code-name">#iconsiji</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconyizhongbiao"></use> </svg> <div class="name">已中标</div> <div class="code-name">#iconyizhongbiao</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconzizhi"></use> </svg> <div class="name">资质</div> <div class="code-name">#iconzizhi</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icontuichu"></use> </svg> <div class="name">tuichu</div> <div class="code-name">#icontuichu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxiugai"></use> </svg> <div class="name">修改</div> <div class="code-name">#iconxiugai</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconyiruku"></use> </svg> <div class="name">已入库</div> <div class="code-name">#iconyiruku</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconweifahuo"></use> </svg> <div class="name">weifahuo</div> <div class="code-name">#iconweifahuo</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icondayinji"></use> </svg> <div class="name">dayinji</div> <div class="code-name">#icondayinji</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icondanwei"></use> </svg> <div class="name">danwei</div> <div class="code-name">#icondanwei</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconweifahuo_dianjitai"></use> </svg> <div class="name">未发货_点击态</div> <div class="code-name">#iconweifahuo_dianjitai</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconbaojia_dianjitai"></use> </svg> <div class="name">报价_点击态</div> <div class="code-name">#iconbaojia_dianjitai</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconyizhongbiao_dianjitai"></use> </svg> <div class="name">已中标_点击态</div> <div class="code-name">#iconyizhongbiao_dianjitai</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconyiruku_dianjitai"></use> </svg> <div class="name">已入库_点击态</div> <div class="code-name">#iconyiruku_dianjitai</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconxietongqiye"></use> </svg> <div class="name">协同企业</div> <div class="code-name">#iconxietongqiye</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconshangchuan"></use> </svg> <div class="name">上传</div> <div class="code-name">#iconshangchuan</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#iconbaojia"></use> </svg> <div class="name">报价</div> <div class="code-name">#iconbaojia</div> </li> <li class="dib"> <svg cla