12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964 |
- <!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>
- <!-- jQuery -->
- <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=1670638" 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">&#xe631;</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">下</div>
- <div class="code-name">&#xe650;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索框</div>
- <div class="code-name">&#xe67b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">网页</div>
- <div class="code-name">&#xe6b2;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">搜索框</div>
- <div class="code-name">&#xe625;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">置顶</div>
- <div class="code-name">&#xe6b7;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">点线-1-01</div>
- <div class="code-name">&#xe623;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">虚线</div>
- <div class="code-name">&#xe644;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_分割线_实线</div>
- <div class="code-name">&#xe624;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_无边距</div>
- <div class="code-name">&#xe620;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_左右边距</div>
- <div class="code-name">&#xe622;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">辅助线条</div>
- <div class="code-name">&#xe6c3;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">辅助空白_未选中</div>
- <div class="code-name">&#xe61f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一左三右</div>
- <div class="code-name">&#xe68b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">二左二右</div>
- <div class="code-name">&#xe687;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一行二个</div>
- <div class="code-name">&#xe688;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一行四个</div>
- <div class="code-name">&#xe689;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一左二右</div>
- <div class="code-name">&#xe68a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一上二下</div>
- <div class="code-name">&#xe649;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">固定</div>
- <div class="code-name">&#xe99a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">横向滑动</div>
- <div class="code-name">&#xe682;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">列表切换-01</div>
- <div class="code-name">&#xe61a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">图片</div>
- <div class="code-name">&#xe61e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">commodity-一行两个</div>
- <div class="code-name">&#xe6fc;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">commodity-详细列表</div>
- <div class="code-name">&#xe6fd;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">大图模式</div>
- <div class="code-name">&#xe619;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一行三个</div>
- <div class="code-name">&#xe686;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_商品图_一大两小</div>
- <div class="code-name">&#xe61c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">选择模块-导航横向滑动</div>
- <div class="code-name">&#xe618;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一大两小</div>
- <div class="code-name">&#xe619;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">富文本</div>
- <div class="code-name">&#xe648;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">语音</div>
- <div class="code-name">&#xe615;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">积分</div>
- <div class="code-name">&#xe602;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">运营</div>
- <div class="code-name">&#xe641;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">视频</div>
- <div class="code-name">&#xe859;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">自定义模块</div>
- <div class="code-name">&#xe6a4;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">老师</div>
- <div class="code-name">&#xe657;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">优惠券</div>
- <div class="code-name">&#xe612;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">快速涨粉</div>
- <div class="code-name">&#xe621;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">拼团</div>
- <div class="code-name">&#xe647;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">秒杀</div>
- <div class="code-name">&#xe607;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">直播 播放 摄像机 天线 线性</div>
- <div class="code-name">&#xe8c9;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">周期购</div>
- <div class="code-name">&#xe6c5;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">课程</div>
- <div class="code-name">&#xe604;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">店铺信息</div>
- <div class="code-name">&#xe61d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">在线客服</div>
- <div class="code-name">&#xe638;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">砍价</div>
- <div class="code-name">&#xe60e;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">报名表单</div>
- <div class="code-name">&#xe666;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">知识专栏</div>
- <div class="code-name">&#xe64d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">商品搜索</div>
- <div class="code-name">&#xe62c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">Component-辅助分割</div>
- <div class="code-name">&#xe708;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">限时折扣</div>
- <div class="code-name">&#xe64a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">公告</div>
- <div class="code-name">&#xe614;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">个性化推荐</div>
- <div class="code-name">&#xe60f;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">文章模块</div>
- <div class="code-name">&#xe610;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">知识付费会员</div>
- <div class="code-name">&#xe613;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">知识专栏</div>
- <div class="code-name">&#xe616;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">打卡</div>
- <div class="code-name">&#xe617;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">魔方</div>
- <div class="code-name">&#xe677;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">进入店铺</div>
- <div class="code-name">&#xe642;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">轮播图</div>
- <div class="code-name">&#xe606;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">大图横向滑动</div>
- <div class="code-name">&#xe608;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">小图横向滑动</div>
- <div class="code-name">&#xe609;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">导航横向滑动</div>
- <div class="code-name">&#xe60b;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">一行一个</div>
- <div class="code-name">&#xe60d;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_图片_轮播海报</div>
- <div class="code-name">&#xe61b;</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">&#xe600;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">居中</div>
- <div class="code-name">&#xe603;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">居左</div>
- <div class="code-name">&#xe601;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">网页</div>
- <div class="code-name">&#xe60c;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">组件</div>
- <div class="code-name">&#xe60a;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">商品</div>
- <div class="code-name">&#xe741;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">图片广告</div>
- <div class="code-name">&#xe611;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">icon_图片导航</div>
- <div class="code-name">&#xe6c0;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">Component-标题文字</div>
- <div class="code-name">&#xe707;</div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont"></span>
- <div class="name">装修</div>
- <div class="code-name">&#xe605;</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-sanlan"></span>
- <div class="name">
- 三栏
- </div>
- <div class="code-name">.icon-sanlan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-shang"></span>
- <div class="name">
- 上
- </div>
- <div class="code-name">.icon-shang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-jiantou"></span>
- <div class="name">
- 下
- </div>
- <div class="code-name">.icon-jiantou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-sousuokuang"></span>
- <div class="name">
- 搜索框
- </div>
- <div class="code-name">.icon-sousuokuang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-wangye1"></span>
- <div class="name">
- 网页
- </div>
- <div class="code-name">.icon-wangye1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-sousuokuang1"></span>
- <div class="name">
- 搜索框
- </div>
- <div class="code-name">.icon-sousuokuang1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhiding"></span>
- <div class="name">
- 置顶
- </div>
- <div class="code-name">.icon-zhiding
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-dianxian--"></span>
- <div class="name">
- 点线-1-01
- </div>
- <div class="code-name">.icon-dianxian--
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-xuxian"></span>
- <div class="name">
- 虚线
- </div>
- <div class="code-name">.icon-xuxian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_fengexian_shixian"></span>
- <div class="name">
- icon_分割线_实线
- </div>
- <div class="code-name">.icon-icon_fengexian_shixian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_wubianju"></span>
- <div class="name">
- icon_无边距
- </div>
- <div class="code-name">.icon-icon_wubianju
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_zuoyoubianju"></span>
- <div class="name">
- icon_左右边距
- </div>
- <div class="code-name">.icon-icon_zuoyoubianju
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-fuzhuxiantiao"></span>
- <div class="name">
- 辅助线条
- </div>
- <div class="code-name">.icon-fuzhuxiantiao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-fuzhukongbai_weixuanzhong"></span>
- <div class="name">
- 辅助空白_未选中
- </div>
- <div class="code-name">.icon-fuzhukongbai_weixuanzhong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yizuosanyou"></span>
- <div class="name">
- 一左三右
- </div>
- <div class="code-name">.icon-yizuosanyou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-erzuoeryou"></span>
- <div class="name">
- 二左二右
- </div>
- <div class="code-name">.icon-erzuoeryou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yihangerge"></span>
- <div class="name">
- 一行二个
- </div>
- <div class="code-name">.icon-yihangerge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yihangsige"></span>
- <div class="name">
- 一行四个
- </div>
- <div class="code-name">.icon-yihangsige
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yizuoeryou"></span>
- <div class="name">
- 一左二右
- </div>
- <div class="code-name">.icon-yizuoeryou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yishangerxia"></span>
- <div class="name">
- 一上二下
- </div>
- <div class="code-name">.icon-yishangerxia
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-guding"></span>
- <div class="name">
- 固定
- </div>
- <div class="code-name">.icon-guding
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-hengxianghuadong"></span>
- <div class="name">
- 横向滑动
- </div>
- <div class="code-name">.icon-hengxianghuadong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-liebiaoqiehuan-"></span>
- <div class="name">
- 列表切换-01
- </div>
- <div class="code-name">.icon-liebiaoqiehuan-
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-tupian"></span>
- <div class="name">
- 图片
- </div>
- <div class="code-name">.icon-tupian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-commodity-yihangliangge"></span>
- <div class="name">
- commodity-一行两个
- </div>
- <div class="code-name">.icon-commodity-yihangliangge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-commodity-xiangxiliebiao"></span>
- <div class="name">
- commodity-详细列表
- </div>
- <div class="code-name">.icon-commodity-xiangxiliebiao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-datumoshi"></span>
- <div class="name">
- 大图模式
- </div>
- <div class="code-name">.icon-datumoshi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yihangsange"></span>
- <div class="name">
- 一行三个
- </div>
- <div class="code-name">.icon-yihangsange
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_shangpintu_yidaliangxiao"></span>
- <div class="name">
- icon_商品图_一大两小
- </div>
- <div class="code-name">.icon-icon_shangpintu_yidaliangxiao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-xuanzemokuai-daohanghengxianghuadong"></span>
- <div class="name">
- 选择模块-导航横向滑动
- </div>
- <div class="code-name">.icon-xuanzemokuai-daohanghengxianghuadong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yidaliangxiao"></span>
- <div class="name">
- 一大两小
- </div>
- <div class="code-name">.icon-yidaliangxiao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-fuwenben"></span>
- <div class="name">
- 富文本
- </div>
- <div class="code-name">.icon-fuwenben
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yuyin"></span>
- <div class="name">
- 语音
- </div>
- <div class="code-name">.icon-yuyin
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-jifenzhang"></span>
- <div class="name">
- 积分
- </div>
- <div class="code-name">.icon-jifenzhang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yunying"></span>
- <div class="name">
- 运营
- </div>
- <div class="code-name">.icon-yunying
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-shipin"></span>
- <div class="name">
- 视频
- </div>
- <div class="code-name">.icon-shipin
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zidingyimokuai"></span>
- <div class="name">
- 自定义模块
- </div>
- <div class="code-name">.icon-zidingyimokuai
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-laoshi"></span>
- <div class="name">
- 老师
- </div>
- <div class="code-name">.icon-laoshi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-youhuiquan"></span>
- <div class="name">
- 优惠券
- </div>
- <div class="code-name">.icon-youhuiquan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-kuaisuzhangfen"></span>
- <div class="name">
- 快速涨粉
- </div>
- <div class="code-name">.icon-kuaisuzhangfen
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-pintuan-copy"></span>
- <div class="name">
- 拼团
- </div>
- <div class="code-name">.icon-pintuan-copy
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-miaosha"></span>
- <div class="name">
- 秒杀
- </div>
- <div class="code-name">.icon-miaosha
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhibobofangshexiangjitianxianxianxing"></span>
- <div class="name">
- 直播 播放 摄像机 天线 线性
- </div>
- <div class="code-name">.icon-zhibobofangshexiangjitianxianxianxing
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhouqi"></span>
- <div class="name">
- 周期购
- </div>
- <div class="code-name">.icon-zhouqi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-kecheng"></span>
- <div class="name">
- 课程
- </div>
- <div class="code-name">.icon-kecheng
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-dianpuxinxi"></span>
- <div class="name">
- 店铺信息
- </div>
- <div class="code-name">.icon-dianpuxinxi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-weibiaoti-_huaban"></span>
- <div class="name">
- 在线客服
- </div>
- <div class="code-name">.icon-weibiaoti-_huaban
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-kanjia"></span>
- <div class="name">
- 砍价
- </div>
- <div class="code-name">.icon-kanjia
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-baomingbiaodan"></span>
- <div class="name">
- 报名表单
- </div>
- <div class="code-name">.icon-baomingbiaodan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhishizhuanlan"></span>
- <div class="name">
- 知识专栏
- </div>
- <div class="code-name">.icon-zhishizhuanlan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-shangpinsousuo"></span>
- <div class="name">
- 商品搜索
- </div>
- <div class="code-name">.icon-shangpinsousuo
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-Component-fuzhufenge"></span>
- <div class="name">
- Component-辅助分割
- </div>
- <div class="code-name">.icon-Component-fuzhufenge
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-xianshizhekou"></span>
- <div class="name">
- 限时折扣
- </div>
- <div class="code-name">.icon-xianshizhekou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-gonggao"></span>
- <div class="name">
- 公告
- </div>
- <div class="code-name">.icon-gonggao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-gexinghuatuijian"></span>
- <div class="name">
- 个性化推荐
- </div>
- <div class="code-name">.icon-gexinghuatuijian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-dianpubijikapian"></span>
- <div class="name">
- 文章模块
- </div>
- <div class="code-name">.icon-dianpubijikapian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhishifufeihuiyuan"></span>
- <div class="name">
- 知识付费会员
- </div>
- <div class="code-name">.icon-zhishifufeihuiyuan
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhishizhuanlan1"></span>
- <div class="name">
- 知识专栏
- </div>
- <div class="code-name">.icon-zhishizhuanlan1
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-daka"></span>
- <div class="name">
- 打卡
- </div>
- <div class="code-name">.icon-daka
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-mofang"></span>
- <div class="name">
- 魔方
- </div>
- <div class="code-name">.icon-mofang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-jinrudianpu"></span>
- <div class="name">
- 进入店铺
- </div>
- <div class="code-name">.icon-jinrudianpu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-lunbotu"></span>
- <div class="name">
- 轮播图
- </div>
- <div class="code-name">.icon-lunbotu
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-datuhengxianghuadong"></span>
- <div class="name">
- 大图横向滑动
- </div>
- <div class="code-name">.icon-datuhengxianghuadong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-xiaotuhengxianghuadong"></span>
- <div class="name">
- 小图横向滑动
- </div>
- <div class="code-name">.icon-xiaotuhengxianghuadong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-daohanghengxianghuadong"></span>
- <div class="name">
- 导航横向滑动
- </div>
- <div class="code-name">.icon-daohanghengxianghuadong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-yihangyige"></span>
- <div class="name">
- 一行一个
- </div>
- <div class="code-name">.icon-yihangyige
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_tupian_lunbohaibao"></span>
- <div class="name">
- icon_图片_轮播海报
- </div>
- <div class="code-name">.icon-icon_tupian_lunbohaibao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-sanjiaoxingzuo"></span>
- <div class="name">
- 三角形左
- </div>
- <div class="code-name">.icon-sanjiaoxingzuo
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-juyou"></span>
- <div class="name">
- 居右
- </div>
- <div class="code-name">.icon-juyou
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-juzhong"></span>
- <div class="name">
- 居中
- </div>
- <div class="code-name">.icon-juzhong
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-horizontal-left"></span>
- <div class="name">
- 居左
- </div>
- <div class="code-name">.icon-horizontal-left
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-wangye"></span>
- <div class="name">
- 网页
- </div>
- <div class="code-name">.icon-wangye
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zujian"></span>
- <div class="name">
- 组件
- </div>
- <div class="code-name">.icon-zujian
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-goods"></span>
- <div class="name">
- 商品
- </div>
- <div class="code-name">.icon-goods
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-tupianguanggao"></span>
- <div class="name">
- 图片广告
- </div>
- <div class="code-name">.icon-tupianguanggao
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-icon_tupiandaohang"></span>
- <div class="name">
- icon_图片导航
- </div>
- <div class="code-name">.icon-icon_tupiandaohang
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-Component-biaotiwenzi"></span>
- <div class="name">
- Component-标题文字
- </div>
- <div class="code-name">.icon-Component-biaotiwenzi
- </div>
- </li>
-
- <li class="dib">
- <span class="icon iconfont icon-zhuangxiu"></span>
- <div class="name">
- 装修
- </div>
- <div class="code-name">.icon-zhuangxiu
- </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-sanlan"></use>
- </svg>
- <div class="name">三栏</div>
- <div class="code-name">#icon-sanlan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-shang"></use>
- </svg>
- <div class="name">上</div>
- <div class="code-name">#icon-shang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-jiantou"></use>
- </svg>
- <div class="name">下</div>
- <div class="code-name">#icon-jiantou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-sousuokuang"></use>
- </svg>
- <div class="name">搜索框</div>
- <div class="code-name">#icon-sousuokuang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-wangye1"></use>
- </svg>
- <div class="name">网页</div>
- <div class="code-name">#icon-wangye1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-sousuokuang1"></use>
- </svg>
- <div class="name">搜索框</div>
- <div class="code-name">#icon-sousuokuang1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhiding"></use>
- </svg>
- <div class="name">置顶</div>
- <div class="code-name">#icon-zhiding</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-dianxian--"></use>
- </svg>
- <div class="name">点线-1-01</div>
- <div class="code-name">#icon-dianxian--</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-xuxian"></use>
- </svg>
- <div class="name">虚线</div>
- <div class="code-name">#icon-xuxian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_fengexian_shixian"></use>
- </svg>
- <div class="name">icon_分割线_实线</div>
- <div class="code-name">#icon-icon_fengexian_shixian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_wubianju"></use>
- </svg>
- <div class="name">icon_无边距</div>
- <div class="code-name">#icon-icon_wubianju</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_zuoyoubianju"></use>
- </svg>
- <div class="name">icon_左右边距</div>
- <div class="code-name">#icon-icon_zuoyoubianju</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-fuzhuxiantiao"></use>
- </svg>
- <div class="name">辅助线条</div>
- <div class="code-name">#icon-fuzhuxiantiao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-fuzhukongbai_weixuanzhong"></use>
- </svg>
- <div class="name">辅助空白_未选中</div>
- <div class="code-name">#icon-fuzhukongbai_weixuanzhong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yizuosanyou"></use>
- </svg>
- <div class="name">一左三右</div>
- <div class="code-name">#icon-yizuosanyou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-erzuoeryou"></use>
- </svg>
- <div class="name">二左二右</div>
- <div class="code-name">#icon-erzuoeryou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yihangerge"></use>
- </svg>
- <div class="name">一行二个</div>
- <div class="code-name">#icon-yihangerge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yihangsige"></use>
- </svg>
- <div class="name">一行四个</div>
- <div class="code-name">#icon-yihangsige</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yizuoeryou"></use>
- </svg>
- <div class="name">一左二右</div>
- <div class="code-name">#icon-yizuoeryou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yishangerxia"></use>
- </svg>
- <div class="name">一上二下</div>
- <div class="code-name">#icon-yishangerxia</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-guding"></use>
- </svg>
- <div class="name">固定</div>
- <div class="code-name">#icon-guding</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-hengxianghuadong"></use>
- </svg>
- <div class="name">横向滑动</div>
- <div class="code-name">#icon-hengxianghuadong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-liebiaoqiehuan-"></use>
- </svg>
- <div class="name">列表切换-01</div>
- <div class="code-name">#icon-liebiaoqiehuan-</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-tupian"></use>
- </svg>
- <div class="name">图片</div>
- <div class="code-name">#icon-tupian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-commodity-yihangliangge"></use>
- </svg>
- <div class="name">commodity-一行两个</div>
- <div class="code-name">#icon-commodity-yihangliangge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-commodity-xiangxiliebiao"></use>
- </svg>
- <div class="name">commodity-详细列表</div>
- <div class="code-name">#icon-commodity-xiangxiliebiao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-datumoshi"></use>
- </svg>
- <div class="name">大图模式</div>
- <div class="code-name">#icon-datumoshi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yihangsange"></use>
- </svg>
- <div class="name">一行三个</div>
- <div class="code-name">#icon-yihangsange</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_shangpintu_yidaliangxiao"></use>
- </svg>
- <div class="name">icon_商品图_一大两小</div>
- <div class="code-name">#icon-icon_shangpintu_yidaliangxiao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-xuanzemokuai-daohanghengxianghuadong"></use>
- </svg>
- <div class="name">选择模块-导航横向滑动</div>
- <div class="code-name">#icon-xuanzemokuai-daohanghengxianghuadong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yidaliangxiao"></use>
- </svg>
- <div class="name">一大两小</div>
- <div class="code-name">#icon-yidaliangxiao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-fuwenben"></use>
- </svg>
- <div class="name">富文本</div>
- <div class="code-name">#icon-fuwenben</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yuyin"></use>
- </svg>
- <div class="name">语音</div>
- <div class="code-name">#icon-yuyin</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-jifenzhang"></use>
- </svg>
- <div class="name">积分</div>
- <div class="code-name">#icon-jifenzhang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yunying"></use>
- </svg>
- <div class="name">运营</div>
- <div class="code-name">#icon-yunying</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-shipin"></use>
- </svg>
- <div class="name">视频</div>
- <div class="code-name">#icon-shipin</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zidingyimokuai"></use>
- </svg>
- <div class="name">自定义模块</div>
- <div class="code-name">#icon-zidingyimokuai</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-laoshi"></use>
- </svg>
- <div class="name">老师</div>
- <div class="code-name">#icon-laoshi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-youhuiquan"></use>
- </svg>
- <div class="name">优惠券</div>
- <div class="code-name">#icon-youhuiquan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-kuaisuzhangfen"></use>
- </svg>
- <div class="name">快速涨粉</div>
- <div class="code-name">#icon-kuaisuzhangfen</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-pintuan-copy"></use>
- </svg>
- <div class="name">拼团</div>
- <div class="code-name">#icon-pintuan-copy</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-miaosha"></use>
- </svg>
- <div class="name">秒杀</div>
- <div class="code-name">#icon-miaosha</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhibobofangshexiangjitianxianxianxing"></use>
- </svg>
- <div class="name">直播 播放 摄像机 天线 线性</div>
- <div class="code-name">#icon-zhibobofangshexiangjitianxianxianxing</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhouqi"></use>
- </svg>
- <div class="name">周期购</div>
- <div class="code-name">#icon-zhouqi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-kecheng"></use>
- </svg>
- <div class="name">课程</div>
- <div class="code-name">#icon-kecheng</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-dianpuxinxi"></use>
- </svg>
- <div class="name">店铺信息</div>
- <div class="code-name">#icon-dianpuxinxi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-weibiaoti-_huaban"></use>
- </svg>
- <div class="name">在线客服</div>
- <div class="code-name">#icon-weibiaoti-_huaban</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-kanjia"></use>
- </svg>
- <div class="name">砍价</div>
- <div class="code-name">#icon-kanjia</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-baomingbiaodan"></use>
- </svg>
- <div class="name">报名表单</div>
- <div class="code-name">#icon-baomingbiaodan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhishizhuanlan"></use>
- </svg>
- <div class="name">知识专栏</div>
- <div class="code-name">#icon-zhishizhuanlan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-shangpinsousuo"></use>
- </svg>
- <div class="name">商品搜索</div>
- <div class="code-name">#icon-shangpinsousuo</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-Component-fuzhufenge"></use>
- </svg>
- <div class="name">Component-辅助分割</div>
- <div class="code-name">#icon-Component-fuzhufenge</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-xianshizhekou"></use>
- </svg>
- <div class="name">限时折扣</div>
- <div class="code-name">#icon-xianshizhekou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-gonggao"></use>
- </svg>
- <div class="name">公告</div>
- <div class="code-name">#icon-gonggao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-gexinghuatuijian"></use>
- </svg>
- <div class="name">个性化推荐</div>
- <div class="code-name">#icon-gexinghuatuijian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-dianpubijikapian"></use>
- </svg>
- <div class="name">文章模块</div>
- <div class="code-name">#icon-dianpubijikapian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhishifufeihuiyuan"></use>
- </svg>
- <div class="name">知识付费会员</div>
- <div class="code-name">#icon-zhishifufeihuiyuan</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhishizhuanlan1"></use>
- </svg>
- <div class="name">知识专栏</div>
- <div class="code-name">#icon-zhishizhuanlan1</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-daka"></use>
- </svg>
- <div class="name">打卡</div>
- <div class="code-name">#icon-daka</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-mofang"></use>
- </svg>
- <div class="name">魔方</div>
- <div class="code-name">#icon-mofang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-jinrudianpu"></use>
- </svg>
- <div class="name">进入店铺</div>
- <div class="code-name">#icon-jinrudianpu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-lunbotu"></use>
- </svg>
- <div class="name">轮播图</div>
- <div class="code-name">#icon-lunbotu</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-datuhengxianghuadong"></use>
- </svg>
- <div class="name">大图横向滑动</div>
- <div class="code-name">#icon-datuhengxianghuadong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-xiaotuhengxianghuadong"></use>
- </svg>
- <div class="name">小图横向滑动</div>
- <div class="code-name">#icon-xiaotuhengxianghuadong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-daohanghengxianghuadong"></use>
- </svg>
- <div class="name">导航横向滑动</div>
- <div class="code-name">#icon-daohanghengxianghuadong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-yihangyige"></use>
- </svg>
- <div class="name">一行一个</div>
- <div class="code-name">#icon-yihangyige</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_tupian_lunbohaibao"></use>
- </svg>
- <div class="name">icon_图片_轮播海报</div>
- <div class="code-name">#icon-icon_tupian_lunbohaibao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-sanjiaoxingzuo"></use>
- </svg>
- <div class="name">三角形左</div>
- <div class="code-name">#icon-sanjiaoxingzuo</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-juyou"></use>
- </svg>
- <div class="name">居右</div>
- <div class="code-name">#icon-juyou</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-juzhong"></use>
- </svg>
- <div class="name">居中</div>
- <div class="code-name">#icon-juzhong</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-horizontal-left"></use>
- </svg>
- <div class="name">居左</div>
- <div class="code-name">#icon-horizontal-left</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-wangye"></use>
- </svg>
- <div class="name">网页</div>
- <div class="code-name">#icon-wangye</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zujian"></use>
- </svg>
- <div class="name">组件</div>
- <div class="code-name">#icon-zujian</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-goods"></use>
- </svg>
- <div class="name">商品</div>
- <div class="code-name">#icon-goods</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-tupianguanggao"></use>
- </svg>
- <div class="name">图片广告</div>
- <div class="code-name">#icon-tupianguanggao</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-icon_tupiandaohang"></use>
- </svg>
- <div class="name">icon_图片导航</div>
- <div class="code-name">#icon-icon_tupiandaohang</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-Component-biaotiwenzi"></use>
- </svg>
- <div class="name">Component-标题文字</div>
- <div class="code-name">#icon-Component-biaotiwenzi</div>
- </li>
-
- <li class="dib">
- <svg class="icon svg-icon" aria-hidden="true">
- <use xlink:href="#icon-zhuangxiu"></use>
- </svg>
- <div class="name">装修</div>
- <div class="code-name">#icon-zhuangxiu</div>
- </li>
-
- </ul>
- <div class="article markdown">
- <h2 id="symbol-">Symbol 引用</h2>
- <hr>
- <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
- 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
- <ul>
- <li>支持多色图标了,不再受单色限制。</li>
- <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
- <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
- <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
- </ul>
- <p>使用步骤如下:</p>
- <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
- <pre><code class="language-html"><script src="./iconfont.js"></script>
- </code></pre>
- <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
- <pre><code class="language-html"><style>
- .icon {
- width: 1em;
- height: 1em;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
- }
- </style>
- </code></pre>
- <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
- <pre><code class="language-html"><svg class="icon" aria-hidden="true">
- <use xlink:href="#icon-xxx"></use>
- </svg>
- </code></pre>
- </div>
- </div>
- </div>
- </div>
- <script>
- $(document).ready(function () {
- $('.tab-container .content:first').show()
- $('#tabs li').click(function (e) {
- var tabContent = $('.tab-container .content')
- var index = $(this).index()
- if ($(this).hasClass('active')) {
- return
- } else {
- $('#tabs li').removeClass('active')
- $(this).addClass('active')
- tabContent.hide().eq(index).fadeIn()
- }
- })
- })
- </script>
- </body>
- </html>
|