cpm-ui

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont Demo</title> <link rel="shortcut icon" href="https://gtms04.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=1389784" 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">单选-fill</div> <div class="code-name">&#xe71e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">单选</div> <div class="code-name">&#xe71f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">方形未选中</div> <div class="code-name">&#xe720;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">方形选中-fill</div> <div class="code-name">&#xe721;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">方形选中</div> <div class="code-name">&#xe722;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">加号</div> <div class="code-name">&#xe726;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">加号1</div> <div class="code-name">&#xe727;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">加号2-fill</div> <div class="code-name">&#xe728;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">减号</div> <div class="code-name">&#xe729;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">圆形未选中</div> <div class="code-name">&#xe72f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">更多</div> <div class="code-name">&#xe73a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">首页-fill</div> <div class="code-name">&#xe750;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">首页</div> <div class="code-name">&#xe751;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">Android更多</div> <div class="code-name">&#xe78d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">pull_down</div> <div class="code-name">&#xe79f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">frown</div> <div class="code-name">&#xe77e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">meh</div> <div class="code-name">&#xe780;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">smile</div> <div class="code-name">&#xe783;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add user</div> <div class="code-name">&#xe7ae;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete team</div> <div class="code-name">&#xe7af;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete user</div> <div class="code-name">&#xe7b0;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">addteam</div> <div class="code-name">&#xe7b1;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe7b2;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">team</div> <div class="code-name">&#xe7b3;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">frown-fill</div> <div class="code-name">&#xe846;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">meh-fill</div> <div class="code-name">&#xe847;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">smile-fill</div> <div class="code-name">&#xe848;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete</div> <div class="code-name">&#xe699;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe69e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">view</div> <div class="code-name">&#xe633;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">view_off</div> <div class="code-name">&#xe634;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">message</div> <div class="code-name">&#xe635;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">time</div> <div class="code-name">&#xe638;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cart_empty</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cart</div> <div class="code-name">&#xe63e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe63f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe640;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">link</div> <div class="code-name">&#xe641;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">share</div> <div class="code-name">&#xe642;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">setting</div> <div class="code-name">&#xe643;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">upload</div> <div class="code-name">&#xe644;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">download</div> <div class="code-name">&#xe645;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">play</div> <div class="code-name">&#xe646;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">region</div> <div class="code-name">&#xe647;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">phonecall</div> <div class="code-name">&#xe64b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">lock</div> <div class="code-name">&#xe64d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">unlock</div> <div class="code-name">&#xe64e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">image</div> <div class="code-name">&#xe653;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">list</div> <div class="code-name">&#xe65a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">refresh</div> <div class="code-name">&#xe65c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close_filled</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check</div> <div class="code-name">&#xe65e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe65f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check_filled</div> <div class="code-name">&#xe660;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">forbidden</div> <div class="code-name">&#xe661;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">forbidden_filled</div> <div class="code-name">&#xe662;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info_filled</div> <div class="code-name">&#xe663;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe664;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">help_filled</div> <div class="code-name">&#xe665;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">help</div> <div class="code-name">&#xe666;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">caution</div> <div class="code-name">&#xe667;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">caution_filled</div> <div class="code-name">&#xe668;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">like</div> <div class="code-name">&#xe669;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">like_filled</div> <div class="code-name">&#xe66a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">star</div> <div class="code-name">&#xe66b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">star_filled</div> <div class="code-name">&#xe66c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow_up</div> <div class="code-name">&#xe66d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow_left</div> <div class="code-name">&#xe66e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow_down</div> <div class="code-name">&#xe66f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow_right</div> <div class="code-name">&#xe670;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">page_first</div> <div class="code-name">&#xe671;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">down_to_bottom</div> <div class="code-name">&#xe672;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">up_to_top</div> <div class="code-name">&#xe673;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">page_last</div> <div class="code-name">&#xe674;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">page_turning_left</div> <div class="code-name">&#xe675;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">page_turning_right</div> <div class="code-name">&#xe676;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">show_less</div> <div class="code-name">&#xe677;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">show_more</div> <div class="code-name">&#xe678;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">social_sina</div> <div class="code-name">&#xe67b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">social_google</div> <div class="code-name">&#xe67c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">social_github</div> <div class="code-name">&#xe680;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">social_wechat</div> <div class="code-name">&#xe683;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">go-to-link</div> <div class="code-name">&#xe686;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">benefits</div> <div class="code-name">&#xe687;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">alipay</div> <div class="code-name">&#xe689;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">taobao</div> <div class="code-name">&#xe68a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">mute mode</div> <div class="code-name">&#xe6e1;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">volume</div> <div class="code-name">&#xe6e3;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe68b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info_filled</div> <div class="code-name">&#xe68c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">pull_down</div> <div class="code-name">&#xe7a0;</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: '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#iconfont') format('svg'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <pre> <code class="language-html" ><span class="iconfont">&#x33;</span> </code></pre> <blockquote> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content font-class"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont icon-radio-filled"></span> <div class="name"> 单选-fill </div> <div class="code-name">.icon-radio-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-radio-disabled"></span> <div class="name"> 单选 </div> <div class="code-name">.icon-radio-disabled </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox"></span> <div class="name"> 方形未选中 </div> <div class="code-name">.icon-checkbox </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox-filled"></span> <div class="name"> 方形选中-fill </div> <div class="code-name">.icon-checkbox-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox-disabled"></span> <div class="name"> 方形选中 </div> <div class="code-name">.icon-checkbox-disabled </div> </li> <li class="dib"> <span class="icon iconfont icon-jiahao2"></span> <div class="name"> 加号 </div> <div class="code-name">.icon-jiahao2 </div> </li> <li class="dib"> <span class="icon iconfont icon-jiahao"></span> <div class="name"> 加号1 </div> <div class="code-name">.icon-jiahao </div> </li> <li class="dib"> <span class="icon iconfont icon-jiahao2-filled"></span> <div class="name"> 加号2-fill </div> <div class="code-name">.icon-jiahao2-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-jianhao"></span> <div class="name"> 减号 </div> <div class="code-name">.icon-jianhao </div> </li> <li class="dib"> <span class="icon iconfont icon-radio"></span> <div class="name"> 圆形未选中 </div> <div class="code-name">.icon-radio </div> </li> <li class="dib"> <span class="icon iconfont icon-gengduo"></span> <div class="name"> 更多 </div> <div class="code-name">.icon-gengduo </div> </li> <li class="dib"> <span class="icon iconfont icon-home-filled"></span> <div class="name"> 首页-fill </div> <div class="code-name">.icon-home-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-home"></span> <div class="name"> 首页 </div> <div class="code-name">.icon-home </div> </li> <li class="dib"> <span class="icon iconfont icon-gengduo2"></span> <div class="name"> Android更多 </div> <div class="code-name">.icon-gengduo2 </div> </li> <li class="dib"> <span class="icon iconfont icon-pulldown"></span> <div class="name"> pull_down </div> <div class="code-name">.icon-pulldown </div> </li> <li class="dib"> <span class="icon iconfont icon-frown"></span> <div class="name"> frown </div> <div class="code-name">.icon-frown </div> </li> <li class="dib"> <span class="icon iconfont icon-meh"></span> <div class="name"> meh </div> <div class="code-name">.icon-meh </div> </li> <li class="dib"> <span class="icon iconfont icon-smile"></span> <div class="name"> smile </div> <div class="code-name">.icon-smile </div> </li> <li class="dib"> <span class="icon iconfont icon-adduser"></span> <div class="name"> add user </div> <div class="code-name">.icon-adduser </div> </li> <li class="dib"> <span class="icon iconfont icon-deleteteam"></span> <div class="name"> delete team </div> <div class="code-name">.icon-deleteteam </div> </li> <li class="dib"> <span class="icon iconfont icon-deleteuser"></span> <div class="name"> delete user </div> <div class="code-name">.icon-deleteuser </div> </li> <li class="dib"> <span class="icon iconfont icon-addteam"></span> <div class="name"> addteam </div> <div class="code-name">.icon-addteam </div> </li> <li class="dib"> <span class="icon iconfont icon-user"></span> <div class="name"> user </div> <div class="code-name">.icon-user </div> </li> <li class="dib"> <span class="icon iconfont icon-team"></span> <div class="name"> team </div> <div class="code-name">.icon-team </div> </li> <li class="dib"> <span class="icon iconfont icon-frown-filled"></span> <div class="name"> frown-fill </div> <div class="code-name">.icon-frown-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-meh-filled"></span> <div class="name"> meh-fill </div> <div class="code-name">.icon-meh-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-smile-filled"></span> <div class="name"> smile-fill </div> <div class="code-name">.icon-smile-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-delete"></span> <div class="name"> delete </div> <div class="code-name">.icon-delete </div> </li> <li class="dib"> <span class="icon iconfont icon-close-simple"></span> <div class="name"> close </div> <div class="code-name">.icon-close-simple </div> </li> <li class="dib"> <span class="icon iconfont icon-view"></span> <div class="name"> view </div> <div class="code-name">.icon-view </div> </li> <li class="dib"> <span class="icon iconfont icon-view-off"></span> <div class="name"> view_off </div> <div class="code-name">.icon-view-off </div> </li> <li class="dib"> <span class="icon iconfont icon-message"></span> <div class="name"> message </div> <div class="code-name">.icon-message </div> </li> <li class="dib"> <span class="icon iconfont icon-time"></span> <div class="name"> time </div> <div class="code-name">.icon-time </div> </li> <li class="dib"> <span class="icon iconfont icon-cart-empty"></span> <div class="name"> cart_empty </div> <div class="code-name">.icon-cart-empty </div> </li> <li class="dib"> <span class="icon iconfont icon-cart"></span> <div class="name"> cart </div> <div class="code-name">.icon-cart </div> </li> <li class="dib"> <span class="icon iconfont icon-search"></span> <div class="name"> search </div> <div class="code-name">.icon-search </div> </li> <li class="dib"> <span class="icon iconfont icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.icon-edit </div> </li> <li class="dib"> <span class="icon iconfont icon-link"></span> <div class="name"> link </div> <div class="code-name">.icon-link </div> </li> <li class="dib"> <span class="icon iconfont icon-share"></span> <div class="name"> share </div> <div class="code-name">.icon-share </div> </li> <li class="dib"> <span class="icon iconfont icon-setting"></span> <div class="name"> setting </div> <div class="code-name">.icon-setting </div> </li> <li class="dib"> <span class="icon iconfont icon-upload"></span> <div class="name"> upload </div> <div class="code-name">.icon-upload </div> </li> <li class="dib"> <span class="icon iconfont icon-download"></span> <div class="name"> download </div> <div class="code-name">.icon-download </div> </li> <li class="dib"> <span class="icon iconfont icon-play"></span> <div class="name"> play </div> <div class="code-name">.icon-play </div> </li> <li class="dib"> <span class="icon iconfont icon-region"></span> <div class="name"> region </div> <div class="code-name">.icon-region </div> </li> <li class="dib"> <span class="icon iconfont icon-phonecall"></span> <div class="name"> phonecall </div> <div class="code-name">.icon-phonecall </div> </li> <li class="dib"> <span class="icon iconfont icon-lock"></span> <div class="name"> lock </div> <div class="code-name">.icon-lock </div> </li> <li class="dib"> <span class="icon iconfont icon-unlock"></span> <div class="name"> unlock </div> <div class="code-name">.icon-unlock </div> </li> <li class="dib"> <span class="icon iconfont icon-image"></span> <div class="name"> image </div> <div class="code-name">.icon-image </div> </li> <li class="dib"> <span class="icon iconfont icon-list"></span> <div class="name"> list </div> <div class="code-name">.icon-list </div> </li> <li class="dib"> <span class="icon iconfont icon-refresh"></span> <div class="name"> refresh </div> <div class="code-name">.icon-refresh </div> </li> <li class="dib"> <span class="icon iconfont icon-close-filled"></span> <div class="name"> close_filled </div> <div class="code-name">.icon-close-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-check"></span> <div class="name"> check </div> <div class="code-name">.icon-check </div> </li> <li class="dib"> <span class="icon iconfont icon-close"></span> <div class="name"> close </div> <div class="code-name">.icon-close </div> </li> <li class="dib"> <span class="icon iconfont icon-check-filled"></span> <div class="name"> check_filled </div> <div class="code-name">.icon-check-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-forbidden"></span> <div class="name"> forbidden </div> <div class="code-name">.icon-forbidden </div> </li> <li class="dib"> <span class="icon iconfont icon-forbidden-filled"></span> <div class="name"> forbidden_filled </div> <div class="code-name">.icon-forbidden-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-info-filled"></span> <div class="name"> info_filled </div> <div class="code-name">.icon-info-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-info"></span> <div class="name"> info </div> <div class="code-name">.icon-info </div> </li> <li class="dib"> <span class="icon iconfont icon-help-filled"></span> <div class="name"> help_filled </div> <div class="code-name">.icon-help-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-help"></span> <div class="name"> help </div> <div class="code-name">.icon-help </div> </li> <li class="dib"> <span class="icon iconfont icon-caution"></span> <div class="name"> caution </div> <div class="code-name">.icon-caution </div> </li> <li class="dib"> <span class="icon iconfont icon-caution-filled"></span> <div class="name"> caution_filled </div> <div class="code-name">.icon-caution-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-like"></span> <div class="name"> like </div> <div class="code-name">.icon-like </div> </li> <li class="dib"> <span class="icon iconfont icon-like-filled"></span> <div class="name"> like_filled </div> <div class="code-name">.icon-like-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-star"></span> <div class="name"> star </div> <div class="code-name">.icon-star </div> </li> <li class="dib"> <span class="icon iconfont icon-star-filled"></span> <div class="name"> star_filled </div> <div class="code-name">.icon-star-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-up"></span> <div class="name"> arrow_up </div> <div class="code-name">.icon-arrow-up </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left"></span> <div class="name"> arrow_left </div> <div class="code-name">.icon-arrow-left </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down"></span> <div class="name"> arrow_down </div> <div class="code-name">.icon-arrow-down </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right"></span> <div class="name"> arrow_right </div> <div class="code-name">.icon-arrow-right </div> </li> <li class="dib"> <span class="icon iconfont icon-page-first"></span> <div class="name"> page_first </div> <div class="code-name">.icon-page-first </div> </li> <li class="dib"> <span class="icon iconfont icon-down-to-bottom"></span> <div class="name"> down_to_bottom </div> <div class="code-name">.icon-down-to-bottom </div> </li> <li class="dib"> <span class="icon iconfont icon-up-to-top"></span> <div class="name"> up_to_top </div> <div class="code-name">.icon-up-to-top </div> </li> <li class="dib"> <span class="icon iconfont icon-page-last"></span> <div class="name"> page_last </div> <div class="code-name">.icon-page-last </div> </li> <li class="dib"> <span class="icon iconfont icon-page-turn-left"></span> <div class="name"> page_turning_left </div> <div class="code-name">.icon-page-turn-left </div> </li> <li class="dib"> <span class="icon iconfont icon-page-turn-right"></span> <div class="name"> page_turning_right </div> <div class="code-name">.icon-page-turn-right </div> </li> <li class="dib"> <span class="icon iconfont icon-show-less"></span> <div class="name"> show_less </div> <div class="code-name">.icon-show-less </div> </li> <li class="dib"> <span class="icon iconfont icon-show-more"></span> <div class="name"> show_more </div> <div class="code-name">.icon-show-more </div> </li> <li class="dib"> <span class="icon iconfont icon-social-sina"></span> <div class="name"> social_sina </div> <div class="code-name">.icon-social-sina </div> </li> <li class="dib"> <span class="icon iconfont icon-social-google"></span> <div class="name"> social_google </div> <div class="code-name">.icon-social-google </div> </li> <li class="dib"> <span class="icon iconfont icon-social-github"></span> <div class="name"> social_github </div> <div class="code-name">.icon-social-github </div> </li> <li class="dib"> <span class="icon iconfont icon-social-wechat"></span> <div class="name"> social_wechat </div> <div class="code-name">.icon-social-wechat </div> </li> <li class="dib"> <span class="icon iconfont icon-go-to-link"></span> <div class="name"> go-to-link </div> <div class="code-name">.icon-go-to-link </div> </li> <li class="dib"> <span class="icon iconfont icon-benefits"></span> <div class="name"> benefits </div> <div class="code-name">.icon-benefits </div> </li> <li class="dib"> <span class="icon iconfont icon-alipay"></span> <div class="name"> alipay </div> <div class="code-name">.icon-alipay </div> </li> <li class="dib"> <span class="icon iconfont icon-taobao"></span> <div class="name"> taobao </div> <div class="code-name">.icon-taobao </div> </li> <li class="dib"> <span class="icon iconfont icon-volume-off"></span> <div class="name"> mute mode </div> <div class="code-name">.icon-volume-off </div> </li> <li class="dib"> <span class="icon iconfont icon-volume"></span> <div class="name"> volume </div> <div class="code-name">.icon-volume </div> </li> <li class="dib"> <span class="icon iconfont icon-info-down"></span> <div class="name"> info </div> <div class="code-name">.icon-info-down </div> </li> <li class="dib"> <span class="icon iconfont icon-info-down-filled"></span> <div class="name"> info_filled </div> <div class="code-name">.icon-info-down-filled </div> </li> <li class="dib"> <span class="icon iconfont icon-pullup"></span> <div class="name"> pull_down </div> <div class="code-name">.icon-pullup </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="iconfont icon-xxx"></span> </code></pre> <blockquote> <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content symbol"> <ul class="icon_lists dib-box"> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-radio-filled"></use> </svg> <div class="name">单选-fill</div> <div class="code-name">#icon-radio-filled</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-radio-disabled"></use> </svg> <div class="name">单选</div> <div class="code-name">#icon-radio-disabled</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox"></use> </svg> <div class="name">方形未选中</div> <div class="code-name">#icon-checkbox</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox-filled"></use> </svg> <div class="name">方形选中-fill</div> <div class="code-name">#icon-checkbox-filled</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox-disabled"></use> </svg> <div class="name">方形选中</div> <div class="code-name">#icon-checkbox-disabled</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-jiahao2"></use> </svg> <div class="name">加号</div> <div class="code-name">#icon-jiahao2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true">