1 Star 0 Fork 3

xinshiyirenxing/bootstrap-v4.0_demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
icons-material.html 172.59 KB
一键复制 编辑 原始数据 按行查看 历史
lib_wiki 提交于 2019-10-22 15:52 . Init commit
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Title -->
<title>Neptune</title>
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="vendor/jscrollpane/jquery.jscrollpane.css">
<link rel="stylesheet" href="vendor/waves/waves.min.css">
<link rel="stylesheet" href="vendor/chartist/chartist.min.css">
<link rel="stylesheet" href="vendor/switchery/dist/switchery.min.css">
<link rel="stylesheet" href="vendor/material-design-iconic-font/css/material-design-iconic-font.min.css">
<!-- Neptune CSS -->
<link rel="stylesheet" href="css/core.css">
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="large-sidebar fixed-sidebar fixed-header">
<div class="wrapper">
<!-- Preloader -->
<div class="preloader"></div>
<!-- Sidebar -->
<div class="site-sidebar-overlay"></div>
<div class="site-sidebar">
<a class="logo" href="index.html">
<span class="l-text">Neptune</span>
<span class="l-icon"></span>
</a>
<div class="custom-scroll custom-scroll-light">
<ul class="sidebar-menu">
<li class="menu-title m-t-0-5">Navigation</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-dashboard"></i></span>
<span class="s-text">Dashboard</span>
</a>
<ul>
<li><a href="index.html">Dashboard 1</a></li>
<li><a href="index2.html">Dashboard 2</a></li>
<li><a href="index3.html">Dashboard 3</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-danger">7</span>
<span class="s-icon"><i class="ti-package"></i></span>
<span class="s-text">Widgets</span>
</a>
<ul>
<li><a href="widgets-blog.html">Blog</a></li>
<li><a href="widgets-social.html">Social</a></li>
<li><a href="widgets-ecommerce.html">Ecommerce</a></li>
<li><a href="widgets-navigation.html">Navigation</a></li>
<li><a href="widgets-headers.html">Headers</a></li>
<li><a href="widgets-footers.html">Footers</a></li>
<li><a href="widgets-tiles.html">Tiles</a></li>
<li><a href="widgets-modals.html">Modals</a></li>
</ul>
</li>
<li class="menu-title">Main</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-purple">12</span>
<span class="s-icon"><i class="ti-paint-bucket"></i></span>
<span class="s-text">UI Kit</span>
</a>
<ul>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-notifications.html">Notifications</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-modal.html">Modal</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-other.html">Other</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-pencil-alt"></i></span>
<span class="s-text">Forms</span>
</a>
<ul>
<li><a href="forms-basic.html">Basic Elements</a></li>
<li><a href="forms-editors.html">Editors</a></li>
<li><a href="forms-plugins.html">Plugins</a></li>
<li><a href="forms-pickers.html">Form Pickers</a></li>
<li><a href="forms-masks.html">Form Masks</a></li>
<li><a href="forms-wizard.html">Form Wizard</a></li>
<li><a href="forms-xeditable.html">X-editable</a></li>
<li><a href="forms-upload.html">File Upload</a></li>
<li><a href="forms-typeahead.html">Typeahead</a></li>
<li><a href="forms-range-slider.html">Range Slider</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu-alt"></i></span>
<span class="s-text">Tables</span>
</a>
<ul>
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-jsgrid.html">jsGrid Tables</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-success">3</span>
<span class="s-icon"><i class="ti-gallery"></i></span>
<span class="s-text">Pages</span>
</a>
<ul>
<li><a href="pages-blank.html">Blank</a></li>
<li><a href="pages-403.html">Error 403</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
<li><a href="pages-faq.html">FAQ</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-profile.html">Profile</a></li>
<li><a href="pages-sign-in.html">Sign In</a></li>
<li><a href="pages-sign-in2.html">Sign In 2</a></li>
<li><a href="pages-reset-password.html">Reset Password</a></li>
<li><a href="pages-sign-up.html">Sign Up</a></li>
<li><a href="pages-contactform.html">Contact Form</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-view-grid"></i></span>
<span class="s-text">Apps</span>
</a>
<ul>
<li><a href="apps-inbox.html">Inbox</a></li>
<li><a href="apps-chat.html">Chat</a></li>
<li><a href="apps-contacts.html">Contacts</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-star"></i></span>
<span class="s-text">Icons</span>
</a>
<ul>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-weather.html">Weather Icons</a></li>
<li><a href="icons-ionicons.html">Ionicons</a></li>
<li><a href="icons-typicons.html">Typicons</a></li>
<li><a href="icons-pe7.html">Pe7 Icons</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-settings"></i></span>
<span class="s-text">Utilities</span>
</a>
<ul>
<li><a href="utilities-color.html">Color utilities</a></li>
<li><a href="utilities-border.html">Border utilities</a></li>
<li><a href="utilities-other.html">Other utilities</a></li>
</ul>
</li>
<li class="menu-title">More</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-arrow"></i></span>
<span class="s-text">Extra</span>
</a>
<ul>
<li><a href="extra-animations.html">Animations</a></li>
<li><a href="extra-comments.html">Comments</a></li>
<li><a href="extra-lightbox.html">Lightbox</a></li>
<li><a href="extra-nestable.html">Nestable</a></li>
<li><a href="extra-crop.html">Image Crop</a></li>
<li><a href="extra-loading-progress.html">Loading Progress</a></li>
<li><a href="extra-prices.html">Prices</a></li>
<li><a href="extra-timeline.html">Timeline</a></li>
<li><a href="extra-search.html">Search</a></li>
<li><a href="extra-scrollbar.html">Scroll Bar</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-new-window"></i></span>
<span class="s-text">Frontend</span>
</a>
<ul>
<li><a href="frontend.html">Frontend 1</a></li>
<li><a href="frontend2.html">Frontend 2</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-info">6</span>
<span class="s-icon"><i class="ti-bar-chart-alt"></i></span>
<span class="s-text">Charts</span>
</a>
<ul>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
<li><a href="charts-chartjs.html">Chart.js</a></li>
<li><a href="charts-peity.html">Peity Chart</a></li>
<li><a href="charts-sparkline.html">Sparkline Chart</a></li>
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-easy.html">Easy Pie Chart</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-email"></i></span>
<span class="s-text">Email Templates</span>
</a>
<ul>
<li><a href="email-basic.html">Basic</a></li>
<li><a href="email-alert.html">Alert</a></li>
<li><a href="email-ecommerce.html">Ecommerce</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-pin"></i></span>
<span class="s-text">Maps</span>
</a>
<ul>
<li><a href="maps-vector.html">Vector Map</a></li>
<li><a href="maps-google.html">Google Map</a></li>
</ul>
</li>
<li>
<a href="calendar.html" class="waves-effect waves-light">
<span class="s-icon"><i class="ti-calendar"></i></span>
<span class="s-text">Calendar</span>
</a>
</li>
<li class="with-sub compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu"></i></span>
<span class="s-text">Menu Levels</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2.3</span>
</a>
<ul>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2.3</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1</a></li>
</ul>
</li>
<li class="menu-title compact-hide">Unique Visitors</li>
<li class="compact-hide">
<div id="sidebar-chart" class="chartist-animated chartist-light"></div>
</li>
<li class="menu-title compact-hide">Tags</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-danger"></i></span>
<span class="s-text">Ideas</span>
</a>
</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-warning"></i></span>
<span class="s-text">Projects</span>
</a>
</li>
<li class="compact-hide">
<a href="documentation.html" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-primary"></i></span>
<span class="s-text">Documentation</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar second -->
<div class="site-sidebar-second custom-scroll custom-scroll-dark">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Todo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-4" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1" role="tabpanel">
<div class="sidebar-chat animated fadeIn">
<div class="sidebar-group">
<h6>Favorites</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">John Doe</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Vance Osborn</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Wolfe Stevie</span>
<span class="tag tag-primary">7</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-warning"></span>
<span class="sc-name">Jonathan Mel</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Carleton Josiah</span>
</a>
</div>
<div class="sidebar-group">
<h6>Work</h6>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Larry Hal</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Ron Carran</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
</div>
<div class="sidebar-group">
<h6>Social</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Lucius Skyler</span>
<span class="tag tag-primary">3</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Landon Graham</span>
</a>
</div>
</div>
<div class="sidebar-chat-window animated fadeIn">
<div class="scw-header clearfix">
<a class="text-grey pull-xs-left" href="#"><i class="ti-angle-left"></i> Back</a>
<div class="pull-xs-right">
<strong>Jonathan Mel</strong>
<div class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
<span class="status bg-success top right"></span>
</div>
</div>
</div>
<div class="scw-item">
<span>Hello!</span>
</div>
<div class="scw-item self">
<span>Meeting at 16:00 in the conference room. Remember?</span>
</div>
<div class="scw-item">
<span>No problem. Thank's for reminder!</span>
</div>
<div class="scw-item self">
<span>Prepare to be amazed.</span>
</div>
<div class="scw-item">
<span>Good. Can't wait!</span>
</div>
<div class="scw-form">
<form>
<input class="form-control" type="text" placeholder="Type...">
<button class="btn btn-secondary" type="button"><i class="ti-angle-right"></i></button>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2" role="tabpanel">
<div class="sidebar-activity animated fadeIn">
<div class="notifications">
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/1.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-pin-alt"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">uploaded <a class="text-black" href="#">monthly report</a></div>
<div class="text-muted font-90">12 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/3.jpg" alt="">
<span class="n-icon bg-success"><i class="ti-comment"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Vance Osborn</a> <span class="text-muted">commented </span> <a class="text-black" href="#">Project</a></div>
<div class="n-comment m-y-0-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
<div class="text-muted font-90">3 hours ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/2.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-email"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Ron Carran</a> <span class="text-muted">send you files</span></div>
<div class="row row-sm m-y-0-5">
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/1.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/2.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/3.jpg" alt="">
</div>
</div>
<div class="text-muted font-90">30 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/4.jpg" alt="">
<span class="n-icon bg-primary"><i class="ti-plus"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Larry Hal</a> <span class="text-muted">invited you to </span><a class="text-black" href="#">Project</a></div>
<div class="text-muted font-90">10:58</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3" role="tabpanel">
<div class="sidebar-todo animated fadeIn">
<div class="sidebar-group">
<h6>Important</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Mock up</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Prototype iPhone</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Build final version</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Approval docs</span>
</label>
</div>
</div>
<div class="sidebar-group">
<h6>Secondary</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Website redesign</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Skype call</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Blog post</span>
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-4" role="tabpanel">
<div class="sidebar-settings animated fadeIn">
<div class="sidebar-group">
<h6>Main</h6>
<div class="ss-item">
<div class="text-truncate">Anyone can register</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow commenting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow deleting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
</div>
<div class="sidebar-group">
<h6>Notificatiоns</h6>
<div class="ss-item">
<div class="text-truncate">Commits</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Messages</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
<div class="sidebar-group">
<h6>Security</h6>
<div class="ss-item">
<div class="text-truncate">Daily backup</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">API Access</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Template options -->
<div class="template-options custom-scroll custom-scroll-dark">
<div class="to-toggle"><i class="ti-settings"></i></div>
<div class="to-content">
<h6>Layouts</h6>
<div class="row m-b-2 text-xs-center">
<div class="col-xs-6 m-b-2">
<a href="index.html">
<img src="img/layouts/1.png" class="img-fluid">
</a>
<div class="text-muted">Default</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="compact-sidebar" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/2.png" class="img-fluid">
</label>
<div class="text-muted">Compact Sidebar</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="fixed-header" type="checkbox" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/3.png" class="img-fluid">
</label>
<div class="text-muted">Fixed Header</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="boxed-wrapper" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/4.png" class="img-fluid">
</label>
<div class="text-muted">Boxed Wrapper</div>
</div>
</div>
<h6>Skins</h6>
<div class="row">
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-default" type="radio" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-dark-blue"></span>
<span class="skin-third bg-info"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-1" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue-2"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-danger"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-2" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second bg-black"></span>
<span class="skin-third bg-success"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-3" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-grey"></span>
<span class="skin-third bg-purple"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-4" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue"></span>
<span class="skin-second skin-dark-blue-2"></span>
<span class="skin-third bg-warning"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-5" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-primary"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-primary"></span>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="site-header">
<nav class="navbar navbar-light">
<ul class="nav navbar-nav">
<li class="nav-item m-r-1 hidden-lg-up">
<a class="nav-link collapse-button" href="#">
<i class="ti-menu"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-check"></i>
<span class="tag tag-success top">3</span>
</a>
<div class="dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">First Task</a>
<span class="pull-xs-right text-muted">75%</span>
</div>
<progress class="progress progress-danger progress-sm" value="75" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/2.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">5 min ago</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Second Task</a>
<span class="pull-xs-right text-muted">40%</span>
</div>
<progress class="progress progress-purple progress-sm" value="40" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/3.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">15:07</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Third Task</a>
<span class="pull-xs-right text-muted">100%</span>
</div>
<progress class="progress progress-warning progress-sm" value="100" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/4.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">yesterday</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Fourth Task</a>
<span class="pull-xs-right text-muted">60%</span>
</div>
<progress class="progress progress-success progress-sm" value="60" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">3 days ago</span>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all tasks</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i>
<span class="tag tag-danger top">12</span>
</a>
<div class="dropdown-messages dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="m-item">
<div class="mi-icon bg-info"><i class="ti-comment"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">commented post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">5 min ago</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">15:07</div>
</div>
<div class="m-item">
<div class="mi-icon bg-purple"><i class="ti-user"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">followed</span> <a class="text-black" href="#">Kate Doe</a></div>
<div class="mi-time">yesterday</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">3 days ago</div>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all notifications</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="avatar box-32">
<img src="img/avatars/1.jpg" alt="">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right animated flipInY">
<a class="dropdown-item" href="#">
<i class="ti-email m-r-0-5"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<i class="ti-user m-r-0-5"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="ti-settings m-r-0-5"></i> Settings
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="ti-help m-r-0-5"></i> Help</a>
<a class="dropdown-item" href="#"><i class="ti-power-off m-r-0-5"></i> Sign out</a>
</div>
</li>
<li class="nav-item hidden-md-up">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapse-1">
<i class="ti-more"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link site-sidebar-second-toggle" href="#" data-toggle="collapse">
<i class="ti-arrow-left"></i>
</a>
</li>
</ul>
<div class="navbar-toggleable-sm collapse" id="collapse-1">
<div class="header-form pull-md-left m-md-r-1">
<form>
<input type="text" class="form-control b-a" placeholder="Search for...">
<button type="submit" class="btn bg-white b-a-0">
<i class="ti-search"></i>
</button>
</form>
</div>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
Add
</a>
<div class="dropdown-menu animated flipInY">
<a class="dropdown-item" href="#">
Link
<span class="tag tag-primary">3</span>
</a>
<a class="dropdown-item" href="#">Another link</a>
<a class="dropdown-item" href="#">
Something else here
<span class="tag tag-success">7</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="site-content">
<!-- Content -->
<div class="content-area p-y-1">
<div class="container-fluid">
<h4>Material Design Icons</h4>
<ol class="breadcrumb no-bg m-b-1">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Icons</a></li>
<li class="breadcrumb-item active">Material Design Icons</li>
</ol>
<div class="box box-block bg-white">
<h5>33 New Icons in 2.2</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-group"></i> group
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rss"></i> rss
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shape"></i> shape
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-spinner"></i> spinner
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-ungroup"></i> ungroup
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-500px"></i> 500px
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-8tracks"></i> 8tracks
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-amazon"></i> amazon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blogger"></i> blogger
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-delicious"></i> delicious
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-disqus"></i> disqus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flattr"></i> flattr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flickr"></i> flickr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-github-alt"></i> github-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-old"></i> google-old
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-linkedin"></i> linkedin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-odnoklassniki"></i> odnoklassniki
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-outlook"></i> outlook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-paypal-alt"></i> paypal-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pinterest"></i> pinterest
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-playstation"></i> playstation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-reddit"></i> reddit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-skype"></i> skype
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-slideshare"></i> slideshare
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-soundcloud"></i> soundcloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tumblr"></i> tumblr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-twitch"></i> twitch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-vimeo"></i> vimeo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-whatsapp"></i> whatsapp
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-xbox"></i> xbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-yahoo"></i> yahoo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-youtube-play"></i> youtube-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-youtube"></i> youtube
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Web Application</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-3d-rotation"></i> 3d-rotation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airplane-off"></i> airplane-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airplane"></i> airplane
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-album"></i> album
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-archive"></i> archive
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-account"></i> assignment-account
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-alert"></i> assignment-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-check"></i> assignment-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-o"></i> assignment-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-return"></i> assignment-return
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment-returned"></i>
assignment-returned
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-assignment"></i> assignment
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-attachment-alt"></i> attachment-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-attachment"></i> attachment
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-audio"></i> audio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-badge-check"></i> badge-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-balance-wallet"></i> balance-wallet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-balance"></i> balance
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-battery-alert"></i> battery-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-battery-flash"></i> battery-flash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-battery-unknown"></i> battery-unknown
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-battery"></i> battery
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bike"></i> bike
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-block-alt"></i> block-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-block"></i> block
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-boat"></i> boat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-book-image"></i> book-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-book"></i> book
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bookmark-outline"></i> bookmark-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bookmark"></i> bookmark
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brush"></i> brush
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bug"></i> bug
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bus"></i> bus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cake"></i> cake
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-car-taxi"></i> car-taxi
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-car-wash"></i> car-wash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-car"></i> car
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-giftcard"></i> card-giftcard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-membership"></i> card-membership
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-travel"></i> card-travel
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card"></i> card
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-case-check"></i> case-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-case-download"></i> case-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-case-play"></i> case-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-case"></i> case
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cast-connected"></i> cast-connected
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cast"></i> cast
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chart-donut"></i> chart-donut
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chart"></i> chart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-city-alt"></i> city-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-city"></i> city
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-close-circle-o"></i> close-circle-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-close-circle"></i> close-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-close"></i> close
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cocktail"></i> cocktail
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-code-setting"></i> code-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-code-smartphone"></i> code-smartphone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-code"></i> code
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-coffee"></i> coffee
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-bookmark"></i>
collection-bookmark
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-case-play"></i>
collection-case-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-folder-image"></i>
collection-folder-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-image-o"></i> collection-image-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-image"></i> collection-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-1"></i> collection-item-1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-2"></i> collection-item-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-3"></i> collection-item-3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-4"></i> collection-item-4
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-5"></i> collection-item-5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-6"></i> collection-item-6
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-7"></i> collection-item-7
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-8"></i> collection-item-8
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-9-plus"></i>
collection-item-9-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item-9"></i> collection-item-9
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-item"></i> collection-item
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-music"></i> collection-music
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-pdf"></i> collection-pdf
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-plus"></i> collection-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-speaker"></i> collection-speaker
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-text"></i> collection-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-collection-video"></i> collection-video
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-compass"></i> compass
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cutlery"></i> cutlery
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-delete"></i> delete
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dialpad"></i> dialpad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dns"></i> dns
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-drink"></i> drink
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-edit"></i> edit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-email-open"></i> email-open
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-email"></i> email
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-eye-off"></i> eye-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-eye"></i> eye
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-eyedropper"></i> eyedropper
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-favorite-outline"></i> favorite-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-favorite"></i> favorite
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-filter-list"></i> filter-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fire"></i> fire
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flag"></i> flag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flare"></i> flare
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flash-auto"></i> flash-auto
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flash-off"></i> flash-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flash"></i> flash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flip"></i> flip
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flower-alt"></i> flower-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flower"></i> flower
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-font"></i> font
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fullscreen-alt"></i> fullscreen-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fullscreen-exit"></i> fullscreen-exit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fullscreen"></i> fullscreen
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-functions"></i> functions
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gas-station"></i> gas-station
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gesture"></i> gesture
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-globe-alt"></i> globe-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-globe-lock"></i> globe-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-globe"></i> globe
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-graduation-cap"></i> graduation-cap
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-group"></i> group
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-home"></i> home
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hospital-alt"></i> hospital-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hospital"></i> hospital
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hotel"></i> hotel
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hourglass-alt"></i> hourglass-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hourglass-outline"></i> hourglass-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hourglass"></i> hourglass
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-http"></i> http
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-image-alt"></i> image-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-image-o"></i> image-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-image"></i> image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-inbox"></i> inbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-invert-colors-off"></i> invert-colors-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-invert-colors"></i> invert-colors
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-key"></i> key
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-label-alt-outline"></i> label-alt-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-label-alt"></i> label-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-label-heart"></i> label-heart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-label"></i> label
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-labels"></i> labels
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-lamp"></i> lamp
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-landscape"></i> landscape
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-layers-off"></i> layers-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-layers"></i> layers
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-library"></i> library
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-link"></i> link
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-lock-open"></i> lock-open
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-lock-outline"></i> lock-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-lock"></i> lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mail-reply-all"></i> mail-reply-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mail-reply"></i> mail-reply
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mail-send"></i> mail-send
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mall"></i> mall
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-map"></i> map
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-menu"></i> menu
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-money-box"></i> money-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-money-off"></i> money-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-money"></i> money
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-more-vert"></i> more-vert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-more"></i> more
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-movie-alt"></i> movie-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-movie"></i> movie
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-nature-people"></i> nature-people
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-nature"></i> nature
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-navigation"></i> navigation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-open-in-browser"></i> open-in-browser
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-open-in-new"></i> open-in-new
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-palette"></i> palette
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-parking"></i> parking
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-account"></i> pin-account
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-assistant"></i> pin-assistant
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-drop"></i> pin-drop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-help"></i> pin-help
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-off"></i> pin-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin"></i> pin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pizza"></i> pizza
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plaster"></i> plaster
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-power-setting"></i> power-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-power"></i> power
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-print"></i> print
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-puzzle-piece"></i> puzzle-piece
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-quote"></i> quote
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-railway"></i> railway
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-receipt"></i> receipt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-refresh-alt"></i> refresh-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-refresh-sync-alert"></i> refresh-sync-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-refresh-sync-off"></i> refresh-sync-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-refresh-sync"></i> refresh-sync
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-refresh"></i> refresh
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-roller"></i> roller
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-ruler"></i> ruler
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-scissors"></i> scissors
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-screen-rotation-lock"></i>
screen-rotation-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-screen-rotation"></i> screen-rotation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-search-for"></i> search-for
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-search-in-file"></i> search-in-file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-search-in-page"></i> search-in-page
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-search-replace"></i> search-replace
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-search"></i> search
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-seat"></i> seat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-settings-square"></i> settings-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-settings"></i> settings
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shape"></i> shape
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shield-check"></i> shield-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shield-security"></i> shield-security
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shopping-basket"></i> shopping-basket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shopping-cart-plus"></i> shopping-cart-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shopping-cart"></i> shopping-cart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sign-in"></i> sign-in
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sort-amount-asc"></i> sort-amount-asc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sort-amount-desc"></i> sort-amount-desc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sort-asc"></i> sort-asc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sort-desc"></i> sort-desc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-spellcheck"></i> spellcheck
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-spinner"></i> spinner
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-storage"></i> storage
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-store-24"></i> store-24
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-store"></i> store
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-subway"></i> subway
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sun"></i> sun
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tab-unselected"></i> tab-unselected
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tab"></i> tab
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tag-close"></i> tag-close
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tag-more"></i> tag-more
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tag"></i> tag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-thumb-down"></i> thumb-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-thumb-up-down"></i> thumb-up-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-thumb-up"></i> thumb-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-ticket-star"></i> ticket-star
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-toll"></i> toll
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-toys"></i> toys
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-traffic"></i> traffic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-translate"></i> translate
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-triangle-down"></i> triangle-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-triangle-up"></i> triangle-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-truck"></i> truck
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-turning-sign"></i> turning-sign
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-ungroup"></i> ungroup
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wallpaper"></i> wallpaper
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-washing-machine"></i> washing-machine
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-window-maximize"></i> window-maximize
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-window-minimize"></i> window-minimize
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-window-restore"></i> window-restore
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wrench"></i> wrench
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-zoom-in"></i> zoom-in
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-zoom-out"></i> zoom-out
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Notifications</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alert-circle-o"></i> alert-circle-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alert-circle"></i> alert-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alert-octagon"></i> alert-octagon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alert-polygon"></i> alert-polygon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alert-triangle"></i> alert-triangle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-help-outline"></i> help-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-help"></i> help
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-info-outline"></i> info-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-info"></i> info
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications-active"></i>
notifications-active
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications-add"></i> notifications-add
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications-none"></i> notifications-none
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications-off"></i> notifications-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications-paused"></i>
notifications-paused
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-notifications"></i> notifications
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Person</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-add"></i> account-add
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-box-mail"></i> account-box-mail
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-box-o"></i> account-box-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-box-phone"></i> account-box-phone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-box"></i> account-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-calendar"></i> account-calendar
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-circle"></i> account-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account-o"></i> account-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-account"></i> account
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts-add"></i> accounts-add
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts-alt"></i> accounts-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts-list-alt"></i> accounts-list-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts-list"></i> accounts-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts-outline"></i> accounts-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-accounts"></i> accounts
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-face"></i> face
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-female"></i> female
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-male-alt"></i> male-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-male-female"></i> male-female
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-male"></i> male
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mood-bad"></i> mood-bad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mood"></i> mood
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-run"></i> run
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-walk"></i> walk
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>File</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-box"></i> cloud-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-circle"></i> cloud-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-done"></i> cloud-done
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-download"></i> cloud-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-off"></i> cloud-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-outline-alt"></i> cloud-outline-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-outline"></i> cloud-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud-upload"></i> cloud-upload
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-cloud"></i> cloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-download"></i> download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-file-plus"></i> file-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-file-text"></i> file-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-file"></i> file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-folder-outline"></i> folder-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-folder-person"></i> folder-person
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-folder-star-alt"></i> folder-star-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-folder-star"></i> folder-star
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-folder"></i> folder
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gif"></i> gif
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-upload"></i> upload
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Editor</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-all"></i> border-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-bottom"></i> border-bottom
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-clear"></i> border-clear
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-color"></i> border-color
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-horizontal"></i> border-horizontal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-inner"></i> border-inner
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-left"></i> border-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-outer"></i> border-outer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-right"></i> border-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-style"></i> border-style
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-top"></i> border-top
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-border-vertical"></i> border-vertical
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-copy"></i> copy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop"></i> crop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-align-center"></i>
format-align-center
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-align-justify"></i>
format-align-justify
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-align-left"></i> format-align-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-align-right"></i> format-align-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-bold"></i> format-bold
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-clear-all"></i> format-clear-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-clear"></i> format-clear
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-color-fill"></i> format-color-fill
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-color-reset"></i> format-color-reset
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-color-text"></i> format-color-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-indent-decrease"></i>
format-indent-decrease
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-indent-increase"></i>
format-indent-increase
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-italic"></i> format-italic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-line-spacing"></i>
format-line-spacing
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-list-bulleted"></i>
format-list-bulleted
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-list-numbered"></i>
format-list-numbered
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-ltr"></i> format-ltr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-rtl"></i> format-rtl
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-size"></i> format-size
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-strikethrough-s"></i>
format-strikethrough-s
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-strikethrough"></i>
format-strikethrough
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-subject"></i> format-subject
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-underlined"></i> format-underlined
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-valign-bottom"></i>
format-valign-bottom
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-valign-center"></i>
format-valign-center
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-format-valign-top"></i> format-valign-top
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-redo"></i> redo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-select-all"></i> select-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-space-bar"></i> space-bar
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-text-format"></i> text-format
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-transform"></i> transform
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-undo"></i> undo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wrap-text"></i> wrap-text
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Comment</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-alert"></i> comment-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-alt-text"></i> comment-alt-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-alt"></i> comment-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-edit"></i> comment-edit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-image"></i> comment-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-list"></i> comment-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-more"></i> comment-more
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-outline"></i> comment-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-text-alt"></i> comment-text-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-text"></i> comment-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment-video"></i> comment-video
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comment"></i> comment
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-comments"></i> comments
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Form</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-check-all"></i> check-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-check-circle-u"></i> check-circle-u
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-check-circle"></i> check-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-check-square"></i> check-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-check"></i> check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-circle-o"></i> circle-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-circle"></i> circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dot-circle-alt"></i> dot-circle-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dot-circle"></i> dot-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-minus-circle-outline"></i>
minus-circle-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-minus-circle"></i> minus-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-minus-square"></i> minus-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-minus"></i> minus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-circle-o-duplicate"></i>
plus-circle-o-duplicate
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-circle-o"></i> plus-circle-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-circle"></i> plus-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-square"></i> plus-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus"></i> plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-square-o"></i> square-o
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-star-circle"></i> star-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-star-half"></i> star-half
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-star-outline"></i> star-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-star"></i> star
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Hardware</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bluetooth-connected"></i>
bluetooth-connected
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bluetooth-off"></i> bluetooth-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bluetooth-search"></i> bluetooth-search
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bluetooth-setting"></i> bluetooth-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-bluetooth"></i> bluetooth
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-add"></i> camera-add
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-alt"></i> camera-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-bw"></i> camera-bw
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-front"></i> camera-front
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-mic"></i> camera-mic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-party-mode"></i> camera-party-mode
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-rear"></i> camera-rear
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-roll"></i> camera-roll
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera-switch"></i> camera-switch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-camera"></i> camera
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-alert"></i> card-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-off"></i> card-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-sd"></i> card-sd
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-card-sim"></i> card-sim
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-desktop-mac"></i> desktop-mac
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-desktop-windows"></i> desktop-windows
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-device-hub"></i> device-hub
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-devices-off"></i> devices-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-devices"></i> devices
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dock"></i> dock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-floppy"></i> floppy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gamepad"></i> gamepad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gps-dot"></i> gps-dot
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gps-off"></i> gps-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gps"></i> gps
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-headset-mic"></i> headset-mic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-headset"></i> headset
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-input-antenna"></i> input-antenna
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-input-composite"></i> input-composite
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-input-hdmi"></i> input-hdmi
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-input-power"></i> input-power
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-input-svideo"></i> input-svideo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-keyboard-hide"></i> keyboard-hide
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-keyboard"></i> keyboard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-laptop-chromebook"></i> laptop-chromebook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-laptop-mac"></i> laptop-mac
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-laptop"></i> laptop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mic-off"></i> mic-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mic-outline"></i> mic-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mic-setting"></i> mic-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mic"></i> mic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-mouse"></i> mouse
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network-alert"></i> network-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network-locked"></i> network-locked
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network-off"></i> network-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network-outline"></i> network-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network-setting"></i> network-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-network"></i> network
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-bluetooth"></i> phone-bluetooth
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-end"></i> phone-end
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-forwarded"></i> phone-forwarded
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-in-talk"></i> phone-in-talk
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-locked"></i> phone-locked
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-missed"></i> phone-missed
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-msg"></i> phone-msg
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-paused"></i> phone-paused
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-ring"></i> phone-ring
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-setting"></i> phone-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone-sip"></i> phone-sip
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-phone"></i> phone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-portable-wifi-changes"></i>
portable-wifi-changes
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-portable-wifi-off"></i> portable-wifi-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-portable-wifi"></i> portable-wifi
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-radio"></i> radio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-reader"></i> reader
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-remote-control-alt"></i> remote-control-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-remote-control"></i> remote-control
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-router"></i> router
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-scanner"></i> scanner
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-android"></i> smartphone-android
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-download"></i>
smartphone-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-erase"></i> smartphone-erase
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-info"></i> smartphone-info
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-iphone"></i> smartphone-iphone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-landscape-lock"></i>
smartphone-landscape-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-landscape"></i>
smartphone-landscape
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-lock"></i> smartphone-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-portrait-lock"></i>
smartphone-portrait-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-ring"></i> smartphone-ring
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-setting"></i> smartphone-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone-setup"></i> smartphone-setup
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-smartphone"></i> smartphone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-speaker"></i> speaker
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tablet-android"></i> tablet-android
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tablet-mac"></i> tablet-mac
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tablet"></i> tablet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tv-alt-play"></i> tv-alt-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tv-list"></i> tv-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tv-play"></i> tv-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tv"></i> tv
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-usb"></i> usb
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-videocam-off"></i> videocam-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-videocam-switch"></i> videocam-switch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-videocam"></i> videocam
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-watch"></i> watch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-alt-2"></i> wifi-alt-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-alt"></i> wifi-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-info"></i> wifi-info
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-lock"></i> wifi-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-off"></i> wifi-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi-outline"></i> wifi-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wifi"></i> wifi
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Directional</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-left-bottom"></i> arrow-left-bottom
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-left"></i> arrow-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-merge"></i> arrow-merge
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-missed"></i> arrow-missed
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-right-top"></i> arrow-right-top
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-right"></i> arrow-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrow-split"></i> arrow-split
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-arrows"></i> arrows
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-down-circle"></i> caret-down-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-down"></i> caret-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-left-circle"></i> caret-left-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-left"></i> caret-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-right-circle"></i> caret-right-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-right"></i> caret-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-up-circle"></i> caret-up-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-caret-up"></i> caret-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chevron-down"></i> chevron-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chevron-left"></i> chevron-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chevron-right"></i> chevron-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-chevron-up"></i> chevron-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-forward"></i> forward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-down"></i> long-arrow-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-left"></i> long-arrow-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-return"></i> long-arrow-return
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-right"></i> long-arrow-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-tab"></i> long-arrow-tab
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-long-arrow-up"></i> long-arrow-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rotate-ccw"></i> rotate-ccw
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rotate-cw"></i> rotate-cw
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rotate-left"></i> rotate-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rotate-right"></i> rotate-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-square-down"></i> square-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-square-right"></i> square-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-swap-alt"></i> swap-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-swap-vertical-circle"></i>
swap-vertical-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-swap-vertical"></i> swap-vertical
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-swap"></i> swap
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-trending-down"></i> trending-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-trending-flat"></i> trending-flat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-trending-up"></i> trending-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-unfold-less"></i> unfold-less
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-unfold-more"></i> unfold-more
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Map (aliases)</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-bike"></i> zmdi-directions-bike
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-boat"></i> zmdi-directions-boat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-bus"></i> zmdi-directions-bus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-car"></i> zmdi-directions-car
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-railway"></i> zmdi-directions-railway
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-run"></i> zmdi-directions-run
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-subway"></i> zmdi-directions-subway
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions-walk"></i> zmdi-directions-walk
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-directions"></i> zmdi-directions
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-layers-off"></i> zmdi-layers-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-layers"></i> zmdi-layers
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-activity"></i> zmdi-local-activity
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-airport"></i> zmdi-local-airport
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-atm"></i> zmdi-local-atm
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-bar"></i> zmdi-local-bar
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-cafe"></i> zmdi-local-cafe
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-car-wash"></i> zmdi-local-car-wash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-convenience-store"></i> zmdi-local-convenience-store
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-dining"></i> zmdi-local-dining
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-drink"></i> zmdi-local-drink
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-florist"></i> zmdi-local-florist
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-gas-station"></i> zmdi-local-gas-station
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-grocery-store"></i> zmdi-local-grocery-store
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-hospital"></i> zmdi-local-hospital
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-hotel"></i> zmdi-local-hotel
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-laundry-service"></i> zmdi-local-laundry-service
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-library"></i> zmdi-local-library
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-mall"></i> zmdi-local-mall
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-movies"></i> zmdi-local-movies
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-offer"></i> zmdi-local-offer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-parking"></i> zmdi-local-parking
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-pharmacy"></i> zmdi-local-pharmacy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-phone"></i> zmdi-local-phone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-pizza"></i> zmdi-local-pizza
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-activity"></i> zmdi-local-activity
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-post-office"></i> zmdi-local-post-office
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-printshop"></i> zmdi-local-printshop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-see"></i> zmdi-local-see
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-shipping"></i> zmdi-local-shipping
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-store"></i> zmdi-local-store
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-taxi"></i> zmdi-local-taxi
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-local-wc"></i> zmdi-local-wc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-map"></i> zmdi-map
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-my-location"></i> zmdi-my-location
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-nature-people"></i> zmdi-nature-people
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-nature"></i> zmdi-nature
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-navigation"></i> zmdi-navigation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-account"></i> zmdi-pin-account
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-assistant"></i> zmdi-pin-assistant
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-drop"></i> zmdi-pin-drop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-help"></i> zmdi-pin-help
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin-off"></i> zmdi-pin-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pin"></i> zmdi-pin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-traffic"></i> zmdi-traffic
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>View</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-apps"></i> apps
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-grid-off"></i> grid-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-grid"></i> grid
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-agenda"></i> view-agenda
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-array"></i> view-array
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-carousel"></i> view-carousel
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-column"></i> view-column
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-comfy"></i> view-comfy
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-compact"></i> view-compact
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-dashboard"></i> view-dashboard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-day"></i> view-day
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-headline"></i> view-headline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-list-alt"></i> view-list-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-list"></i> view-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-module"></i> view-module
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-quilt"></i> view-quilt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-stream"></i> view-stream
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-subtitles"></i> view-subtitles
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-toc"></i> view-toc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-web"></i> view-web
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-view-week"></i> view-week
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-widgets"></i> widgets
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Date / Time</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alarm-check"></i> alarm-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alarm-off"></i> alarm-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alarm-plus"></i> alarm-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alarm-snooze"></i> alarm-snooze
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-alarm"></i> alarm
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-calendar-alt"></i> calendar-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-calendar-check"></i> calendar-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-calendar-close"></i> calendar-close
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-calendar-note"></i> calendar-note
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-calendar"></i> calendar
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-time-countdown"></i> time-countdown
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-time-interval"></i> time-interval
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-time-restore-setting"></i>
time-restore-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-time-restore"></i> time-restore
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-time"></i> time
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-timer-off"></i> timer-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-timer"></i> timer
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Social</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-android-alt"></i> android-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-android"></i> android
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-apple"></i> apple
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-behance"></i> behance
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-codepen"></i> codepen
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dribbble"></i> dribbble
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-dropbox"></i> dropbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-evernote"></i> evernote
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-facebook-box"></i> facebook-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-facebook"></i> facebook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-github-box"></i> github-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-github"></i> github
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-drive"></i> google-drive
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-earth"></i> google-earth
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-glass"></i> google-glass
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-maps"></i> google-maps
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-pages"></i> google-pages
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-play"></i> google-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-plus-box"></i> google-plus-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-plus"></i> google-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google"></i> google
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-instagram"></i> instagram
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-language-css3"></i> language-css3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-language-html5"></i> language-html5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-language-javascript"></i>
language-javascript
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-language-python-alt"></i>
language-python-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-language-python"></i> language-python
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-lastfm"></i> lastfm
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-linkedin-box"></i> linkedin-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-paypal"></i> paypal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pinterest-box"></i> pinterest-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pocket"></i> pocket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-polymer"></i> polymer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-rss"></i> rss
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-share"></i> share
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-stackoverflow"></i> stackoverflow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-steam-square"></i> steam-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-steam"></i> steam
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-twitter-box"></i> twitter-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-twitter"></i> twitter
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-vk"></i> vk
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wikipedia"></i> wikipedia
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-windows"></i> windows
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-500px"></i> 500px
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-8tracks"></i> 8tracks
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-amazon"></i> amazon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blogger"></i> blogger
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-delicious"></i> delicious
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-disqus"></i> disqus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flattr"></i> flattr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flickr"></i> flickr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-github-alt"></i> github-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-google-old"></i> google-old
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-linkedin"></i> linkedin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-odnoklassniki"></i> odnoklassniki
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-outlook"></i> outlook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-paypal-alt"></i> paypal-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pinterest"></i> pinterest
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-playstation"></i> playstation
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-reddit"></i> reddit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-skype"></i> skype
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-slideshare"></i> slideshare
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-soundcloud"></i> soundcloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tumblr"></i> tumblr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-twitch"></i> twitch
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-vimeo"></i> vimeo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-whatsapp"></i> whatsapp
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-xbox"></i> xbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-yahoo"></i> yahoo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-youtube-play"></i> youtube-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-youtube"></i> youtube
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Image</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-aspect-ratio-alt"></i> aspect-ratio-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-aspect-ratio"></i> aspect-ratio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blur-circular"></i> blur-circular
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blur-linear"></i> blur-linear
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blur-off"></i> blur-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-blur"></i> blur
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-2"></i> brightness-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-3"></i> brightness-3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-4"></i> brightness-4
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-5"></i> brightness-5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-6"></i> brightness-6
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-7"></i> brightness-7
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-auto"></i> brightness-auto
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-brightness-setting"></i> brightness-setting
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-broken-image"></i> broken-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-center-focus-strong"></i>
center-focus-strong
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-center-focus-weak"></i> center-focus-weak
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-compare"></i> compare
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-16-9"></i> crop-16-9
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-3-2"></i> crop-3-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-5-4"></i> crop-5-4
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-7-5"></i> crop-7-5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-din"></i> crop-din
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-free"></i> crop-free
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-landscape"></i> crop-landscape
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-portrait"></i> crop-portrait
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-crop-square"></i> crop-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-exposure-alt"></i> exposure-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-exposure"></i> exposure
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-filter-b-and-w"></i> filter-b-and-w
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-filter-center-focus"></i>
filter-center-focus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-filter-frames"></i> filter-frames
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-filter-tilt-shift"></i> filter-tilt-shift
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-gradient"></i> gradient
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-grain"></i> grain
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-graphic-eq"></i> graphic-eq
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hdr-off"></i> hdr-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hdr-strong"></i> hdr-strong
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hdr-weak"></i> hdr-weak
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hdr"></i> hdr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-iridescent"></i> iridescent
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-leak-off"></i> leak-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-leak"></i> leak
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-looks"></i> looks
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-loupe"></i> loupe
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-panorama-horizontal"></i>
panorama-horizontal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-panorama-vertical"></i> panorama-vertical
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-panorama-wide-angle"></i>
panorama-wide-angle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-photo-size-select-large"></i>
photo-size-select-large
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-photo-size-select-small"></i>
photo-size-select-small
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-picture-in-picture"></i> picture-in-picture
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-slideshow"></i> slideshow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-texture"></i> texture
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tonality"></i> tonality
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-vignette"></i> vignette
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-wb-auto"></i> wb-auto
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Audio / Video</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-eject-alt"></i> eject-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-eject"></i> eject
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-equalizer"></i> equalizer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fast-forward"></i> fast-forward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-fast-rewind"></i> fast-rewind
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-forward-10"></i> forward-10
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-forward-30"></i> forward-30
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-forward-5"></i> forward-5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hearing"></i> hearing
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pause-circle-outline"></i>
pause-circle-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pause-circle"></i> pause-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-pause"></i> pause
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-play-circle-outline"></i>
play-circle-outline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-play-circle"></i> play-circle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-play"></i> play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-playlist-audio"></i> playlist-audio
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-playlist-plus"></i> playlist-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-repeat-one"></i> repeat-one
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-repeat"></i> repeat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-replay-10"></i> replay-10
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-replay-30"></i> replay-30
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-replay-5"></i> replay-5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-replay"></i> replay
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-shuffle"></i> shuffle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-skip-next"></i> skip-next
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-skip-previous"></i> skip-previous
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-stop"></i> stop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-surround-sound"></i> surround-sound
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tune"></i> tune
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-volume-down"></i> volume-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-volume-mute"></i> volume-mute
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-volume-off"></i> volume-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-volume-up"></i> volume-up
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Numbers</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-1-square"></i> n-1-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-2-square"></i> n-2-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-3-square"></i> n-3-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-4-square"></i> n-4-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-5-square"></i> n-5-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-n-6-square"></i> n-6-square
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-neg-1"></i> neg-1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-neg-2"></i> neg-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-1"></i> plus-1
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-plus-2"></i> plus-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sec-10"></i> sec-10
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-sec-3"></i> sec-3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-zero"></i> zero
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Other</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-flat-angled"></i>
airline-seat-flat-angled
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-flat"></i> airline-seat-flat
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-individual-suite"></i> airline-seat-individual-suite
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-legroom-extra"></i> airline-seat-legroom-extra
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-legroom-normal"></i> airline-seat-legroom-normal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-legroom-reduced"></i> airline-seat-legroom-reduced
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-recline-extra"></i> airline-seat-recline-extra
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airline-seat-recline-normal"></i> airline-seat-recline-normal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-airplay"></i> airplay
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-closed-caption"></i> closed-caption
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-confirmation-number"></i>
confirmation-number
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-developer-board"></i> developer-board
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-disc-full"></i> disc-full
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-explicit"></i> explicit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flight-land"></i> flight-land
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flight-takeoff"></i> flight-takeoff
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flip-to-back"></i> flip-to-back
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-flip-to-front"></i> flip-to-front
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-group-work"></i> group-work
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hd"></i> hd
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-hq"></i> hq
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-markunread-mailbox"></i> markunread-mailbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-memory"></i> memory
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-nfc"></i> nfc
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-play-for-work"></i> play-for-work
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-power-input"></i> power-input
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-present-to-all"></i> present-to-all
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-satellite"></i> satellite
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-tap-and-play"></i> tap-and-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-vibration"></i> vibration
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<i class="zmdi zmdi-voicemail"></i> voicemail
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid">
2016 © Neptune
</div>
</footer>
</div>
</div>
<!-- Vendor JS -->
<script type="text/javascript" src="vendor/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="vendor/tether/js/tether.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/mwheelIntent.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
<script type="text/javascript" src="vendor/chartist/chartist.min.js"></script>
<script type="text/javascript" src="vendor/switchery/dist/switchery.min.js"></script>
<!-- Neptune JS -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/lcl_xinshi/bootstrap-v4.0_demo.git
git@gitee.com:lcl_xinshi/bootstrap-v4.0_demo.git
lcl_xinshi
bootstrap-v4.0_demo
bootstrap-v4.0_demo
master

搜索帮助

23e8dbc6 1850385 7e0993f3 1850385