1 Star 0 Fork 3

xinshiyirenxing/bootstrap-v4.0_demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
icons-themify.html 82.23 KB
一键复制 编辑 原始数据 按行查看 历史
lib_wiki 提交于 2019-10-22 15:52 . Init commit
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011
<!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">
<!-- 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>Themify 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">Themify Icons</li>
</ol>
<div class="box box-block bg-white">
<h5>Arrows & Direction Icons</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-up"></span> ti-arrow-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-right"></span> ti-arrow-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-left"></span> ti-arrow-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-down"></span> ti-arrow-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrows-vertical"></span> ti-arrows-vertical
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrows-horizontal"></span> ti-arrows-horizontal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-up"></span> ti-angle-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-right"></span> ti-angle-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-left"></span> ti-angle-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-down"></span> ti-angle-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-double-up"></span> ti-angle-double-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-double-right"></span> ti-angle-double-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-double-left"></span> ti-angle-double-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-angle-double-down"></span> ti-angle-double-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-move"></span> ti-move
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-fullscreen"></span> ti-fullscreen
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-top-right"></span> ti-arrow-top-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-top-left"></span> ti-arrow-top-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-circle-up"></span> ti-arrow-circle-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-circle-right"></span> ti-arrow-circle-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-circle-left"></span> ti-arrow-circle-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrow-circle-down"></span> ti-arrow-circle-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-arrows-corner"></span> ti-arrows-corner
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-split-v"></span> ti-split-v
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-split-v-alt"></span> ti-split-v-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-split-h"></span> ti-split-h
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-point-up"></span> ti-hand-point-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-point-right"></span> ti-hand-point-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-point-left"></span> ti-hand-point-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-point-down"></span> ti-hand-point-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-back-right"></span> ti-back-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-back-left"></span> ti-back-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-exchange-vertical"></span> ti-exchange-vertical
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Web App Icons</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-wand"></span> ti-wand
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-save"></span> ti-save
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-save-alt"></span> ti-save-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-direction"></span> ti-direction
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-direction-alt"></span> ti-direction-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-user"></span> ti-user
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-link"></span> ti-link
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-unlink"></span> ti-unlink
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-trash"></span> ti-trash
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-target"></span> ti-target
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-tag"></span> ti-tag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-desktop"></span> ti-desktop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-tablet"></span> ti-tablet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-mobile"></span> ti-mobile
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-email"></span> ti-email
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-star"></span> ti-star
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-spray"></span> ti-spray
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-signal"></span> ti-signal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shopping-cart"></span> ti-shopping-cart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shopping-cart-full"></span> ti-shopping-cart-full
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-settings"></span> ti-settings
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-search"></span> ti-search
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-zoom-in"></span> ti-zoom-in
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-zoom-out"></span> ti-zoom-out
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-cut"></span> ti-cut
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ruler"></span> ti-ruler
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ruler-alt-2"></span> ti-ruler-alt-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ruler-pencil"></span> ti-ruler-pencil
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ruler-alt"></span> ti-ruler-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bookmark"></span> ti-bookmark
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bookmark-alt"></span> ti-bookmark-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-reload"></span> ti-reload
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-plus"></span> ti-plus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-minus"></span> ti-minus
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-close"></span> ti-close
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pin"></span> ti-pin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pencil"></span> ti-pencil
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pencil-alt"></span> ti-pencil-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-paint-roller"></span> ti-paint-roller
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-paint-bucket"></span> ti-paint-bucket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-na"></span> ti-na
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-medall"></span> ti-medall
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-medall-alt"></span> ti-medall-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-marker"></span> ti-marker
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-marker-alt"></span> ti-marker-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-lock"></span> ti-lock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-unlock"></span> ti-unlock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-location-arrow"></span> ti-location-arrow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout"></span> ti-layout
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layers"></span> ti-layers
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layers-alt"></span> ti-layers-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-key"></span> ti-key
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-image"></span> ti-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-heart"></span> ti-heart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-heart-broken"></span> ti-heart-broken
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-stop"></span> ti-hand-stop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-open"></span> ti-hand-open
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hand-drag"></span> ti-hand-drag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-flag"></span> ti-flag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-flag-alt"></span> ti-flag-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-flag-alt-2"></span> ti-flag-alt-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-eye"></span> ti-eye
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-import"></span> ti-import
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-export"></span> ti-export
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-cup"></span> ti-cup
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-crown"></span> ti-crown
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-comments"></span> ti-comments
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-comment"></span> ti-comment
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-comment-alt"></span> ti-comment-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-thought"></span> ti-thought
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-clip"></span> ti-clip
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-check"></span> ti-check
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-check-box"></span> ti-check-box
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-camera"></span> ti-camera
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-announcement"></span> ti-announcement
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-brush"></span> ti-brush
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-brush-alt"></span> ti-brush-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-palette"></span> ti-palette
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-briefcase"></span> ti-briefcase
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bolt"></span> ti-bolt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bolt-alt"></span> ti-bolt-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-blackboard"></span> ti-blackboard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bag"></span> ti-bag
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-world"></span> ti-world
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-wheelchair"></span> ti-wheelchair
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-car"></span> ti-car
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-truck"></span> ti-truck
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-timer"></span> ti-timer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ticket"></span> ti-ticket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-thumb-up"></span> ti-thumb-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-thumb-down"></span> ti-thumb-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-stats-up"></span> ti-stats-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-stats-down"></span> ti-stats-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shine"></span> ti-shine
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shift-right"></span> ti-shift-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shift-left"></span> ti-shift-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shift-right-alt"></span> ti-shift-right-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shift-left-alt"></span> ti-shift-left-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shield"></span> ti-shield
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-notepad"></span> ti-notepad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-server"></span> ti-server
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pulse"></span> ti-pulse
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-printer"></span> ti-printer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-power-off"></span> ti-power-off
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-plug"></span> ti-plug
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pie-chart"></span> ti-pie-chart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-panel"></span> ti-panel
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-package"></span> ti-package
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-music"></span> ti-music
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-music-alt"></span> ti-music-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-mouse"></span> ti-mouse
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-mouse-alt"></span> ti-mouse-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-money"></span> ti-money
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-microphone"></span> ti-microphone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-menu"></span> ti-menu
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-menu-alt"></span> ti-menu-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-map"></span> ti-map
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-map-alt"></span> ti-map-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-location-pin"></span> ti-location-pin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-light-bulb"></span> ti-light-bulb
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-info"></span> ti-info
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-infinite"></span> ti-infinite
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-id-badge"></span> ti-id-badge
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-hummer"></span> ti-hummer
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-home"></span> ti-home
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-help"></span> ti-help
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-headphone"></span> ti-headphone
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-harddrives"></span> ti-harddrives
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-harddrive"></span> ti-harddrive
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-gift"></span> ti-gift
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-game"></span> ti-game
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-filter"></span> ti-filter
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-files"></span> ti-files
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-file"></span> ti-file
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-zip"></span> ti-zip
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-folder"></span> ti-folder
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-envelope"></span> ti-envelope
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-dashboard"></span> ti-dashboard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-cloud"></span> ti-cloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-cloud-up"></span> ti-cloud-up
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-cloud-down"></span> ti-cloud-down
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-clipboard"></span> ti-clipboard
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-calendar"></span> ti-calendar
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-book"></span> ti-book
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bell"></span> ti-bell
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-basketball"></span> ti-basketball
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bar-chart"></span> ti-bar-chart
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-bar-chart-alt"></span> ti-bar-chart-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-archive"></span> ti-archive
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-anchor"></span> ti-anchor
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-alert"></span> ti-alert
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-alarm-clock"></span> ti-alarm-clock
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-agenda"></span> ti-agenda
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-write"></span> ti-write
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-wallet"></span> ti-wallet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-video-clapper"></span> ti-video-clapper
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-video-camera"></span> ti-video-camera
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-vector"></span> ti-vector
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-support"></span> ti-support
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-stamp"></span> ti-stamp
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-slice"></span> ti-slice
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-shortcode"></span> ti-shortcode
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-receipt"></span> ti-receipt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pin2"></span> ti-pin2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pin-alt"></span> ti-pin-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pencil-alt2"></span> ti-pencil-alt2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-eraser"></span> ti-eraser
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-more"></span> ti-more
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-more-alt"></span> ti-more-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-microphone-alt"></span> ti-microphone-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-magnet"></span> ti-magnet
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-line-double"></span> ti-line-double
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-line-dotted"></span> ti-line-dotted
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-line-dashed"></span> ti-line-dashed
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-ink-pen"></span> ti-ink-pen
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-info-alt"></span> ti-info-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-help-alt"></span> ti-help-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-headphone-alt"></span> ti-headphone-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-gallery"></span> ti-gallery
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-face-smile"></span> ti-face-smile
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-face-sad"></span> ti-face-sad
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-credit-card"></span> ti-credit-card
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-comments-smiley"></span> ti-comments-smiley
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-time"></span> ti-time
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-share"></span> ti-share
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-share-alt"></span> ti-share-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-rocket"></span> ti-rocket
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-new-window"></span> ti-new-window
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-rss"></span> ti-rss
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-rss-alt"></span> ti-rss-alt
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Control Icons</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-stop"></span> ti-control-stop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-shuffle"></span> ti-control-shuffle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-play"></span> ti-control-play
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-pause"></span> ti-control-pause
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-forward"></span> ti-control-forward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-backward"></span> ti-control-backward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-volume"></span> ti-volume
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-skip-forward"></span> ti-control-skip-forward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-skip-backward"></span> ti-control-skip-backward
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-record"></span> ti-control-record
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-control-eject"></span> ti-control-eject
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Text Editor</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-paragraph"></span> ti-paragraph
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-uppercase"></span> ti-uppercase
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-underline"></span> ti-underline
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-text"></span> ti-text
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-Italic"></span> ti-Italic
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-smallcap"></span> ti-smallcap
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-list"></span> ti-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-list-ol"></span> ti-list-ol
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-align-right"></span> ti-align-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-align-left"></span> ti-align-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-align-justify"></span> ti-align-justify
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-align-center"></span> ti-align-center
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-quote-right"></span> ti-quote-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-quote-left"></span> ti-quote-left
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Layout Icons</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-width-full"></span> ti-layout-width-full
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-width-default"></span> ti-layout-width-default
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-width-default-alt"></span> ti-layout-width-default-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-tab"></span> ti-layout-tab
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-tab-window"></span> ti-layout-tab-window
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-tab-v"></span> ti-layout-tab-v
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-tab-min"></span> ti-layout-tab-min
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-slider"></span> ti-layout-slider
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-slider-alt"></span> ti-layout-slider-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-sidebar-right"></span> ti-layout-sidebar-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-sidebar-none"></span> ti-layout-sidebar-none
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-sidebar-left"></span> ti-layout-sidebar-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-placeholder"></span> ti-layout-placeholder
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-menu"></span> ti-layout-menu
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-menu-v"></span> ti-layout-menu-v
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-menu-separated"></span> ti-layout-menu-separated
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-menu-full"></span> ti-layout-menu-full
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-right"></span> ti-layout-media-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-right-alt"></span> ti-layout-media-right-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-overlay"></span> ti-layout-media-overlay
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-overlay-alt"></span> ti-layout-media-overlay-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-overlay-alt-2"></span> ti-layout-media-overlay-alt-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-left"></span> ti-layout-media-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-left-alt"></span> ti-layout-media-left-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-center"></span> ti-layout-media-center
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-media-center-alt"></span> ti-layout-media-center-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-list-thumb"></span> ti-layout-list-thumb
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-list-thumb-alt"></span> ti-layout-list-thumb-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-list-post"></span> ti-layout-list-post
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-list-large-image"></span> ti-layout-list-large-image
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-line-solid"></span> ti-layout-line-solid
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid4"></span> ti-layout-grid4
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid3"></span> ti-layout-grid3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid2"></span> ti-layout-grid2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid2-thumb"></span> ti-layout-grid2-thumb
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-cta-right"></span> ti-layout-cta-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-cta-left"></span> ti-layout-cta-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-cta-center"></span> ti-layout-cta-center
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-cta-btn-right"></span> ti-layout-cta-btn-right
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-cta-btn-left"></span> ti-layout-cta-btn-left
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column4"></span> ti-layout-column4
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column3"></span> ti-layout-column3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column2"></span> ti-layout-column2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-accordion-separated"></span> ti-layout-accordion-separated
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-accordion-merged"></span> ti-layout-accordion-merged
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-accordion-list"></span> ti-layout-accordion-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-widgetized"></span> ti-widgetized
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-widget"></span> ti-widget
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-widget-alt"></span> ti-widget-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-view-list"></span> ti-view-list
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-view-list-alt"></span> ti-view-list-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-view-grid"></span> ti-view-grid
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-upload"></span> ti-upload
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-download"></span> ti-download
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-loop"></span> ti-loop
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-sidebar-2"></span> ti-layout-sidebar-2
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid4-alt"></span> ti-layout-grid4-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid3-alt"></span> ti-layout-grid3-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-grid2-alt"></span> ti-layout-grid2-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column4-alt"></span> ti-layout-column4-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column3-alt"></span> ti-layout-column3-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-layout-column2-alt"></span> ti-layout-column2-alt
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Brand Icons</h5>
<div class="row icon-area">
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-flickr"></span> ti-flickr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-flickr-alt"></span> ti-flickr-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-instagram"></span> ti-instagram
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-google"></span> ti-google
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-github"></span> ti-github
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-facebook"></span> ti-facebook
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-dropbox"></span> ti-dropbox
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-dropbox-alt"></span> ti-dropbox-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-dribbble"></span> ti-dribbble
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-apple"></span> ti-apple
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-android"></span> ti-android
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-yahoo"></span> ti-yahoo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-trello"></span> ti-trello
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-stack-overflow"></span> ti-stack-overflow
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-soundcloud"></span> ti-soundcloud
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-sharethis"></span> ti-sharethis
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-sharethis-alt"></span> ti-sharethis-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-reddit"></span> ti-reddit
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-microsoft"></span> ti-microsoft
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-microsoft-alt"></span> ti-microsoft-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-linux"></span> ti-linux
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-jsfiddle"></span> ti-jsfiddle
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-joomla"></span> ti-joomla
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-html5"></span> ti-html5
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-css3"></span> ti-css3
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-drupal"></span> ti-drupal
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-wordpress"></span> ti-wordpress
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-tumblr"></span> ti-tumblr
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-tumblr-alt"></span> ti-tumblr-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-skype"></span> ti-skype
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-youtube"></span> ti-youtube
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-vimeo"></span> ti-vimeo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-vimeo-alt"></span> ti-vimeo-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-twitter"></span> ti-twitter
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-twitter-alt"></span> ti-twitter-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-linkedin"></span> ti-linkedin
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pinterest"></span> ti-pinterest
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-pinterest-alt"></span> ti-pinterest-alt
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-themify-logo"></span> ti-themify-logo
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-themify-favicon"></span> ti-themify-favicon
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<span class="ti-themify-favicon-alt"></span> ti-themify-favicon-alt
</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