youngqj
/
flatkit-html5-admin


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Flatkit - HTML Version | Bootstrap 4 Web App Kit with AngularJS</title>
  <meta name="description" content="Admin, Dashboard, Bootstrap, Bootstrap 4, Angular, AngularJS" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="assets/images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">
  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="assets/images/logo.png">
  
  <!-- style -->
  <link rel="stylesheet" href="assets/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/glyphicons/glyphicons.css" type="text/css" />
  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/material-design-icons/material-design-icons.css" type="text/css" />

  <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <!-- build:css assets/styles/app.min.css -->
  <link rel="stylesheet" href="assets/styles/app.css" type="text/css" />
  <!-- endbuild -->
  <link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
</head>
<body>
  <div class="app" id="app">

<!-- ############ LAYOUT START-->

  <!-- aside -->
  <div id="aside" class="app-aside modal fade nav-dropdown">
  	<!-- fluid app aside -->
    <div class="left navside dark dk" layout="column">
  	  <div class="navbar no-radius">
        <!-- brand -->
        <a class="navbar-brand">
        	<div ui-include="'assets/images/logo.svg'"></div>
        	<img src="assets/images/logo.png" alt="." class="hide">
        	<span class="hidden-folded inline">Flatkit</span>
        </a>
        <!-- / brand -->
      </div>
      <div flex class="hide-scroll">
          <nav class="scroll nav-light">
            
              <ul class="nav" ui-nav>
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Main</small>
                </li>
                
                <li>
                  <a href="index.html" >
                    <span class="nav-icon">
                      <i class="material-icons">&#xe3fc;
                        <span ui-include="'assets/images/i_0.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Dashboard</span>
                  </a>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label">
                      <b class="label rounded label-sm primary">5</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe5c3;
                        <span ui-include="'assets/images/i_1.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Apps</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="inbox.html" >
                        <span class="nav-text">Inbox</span>
                      </a>
                    </li>
                    <li>
                      <a href="contact.html" >
                        <span class="nav-text">Contacts</span>
                      </a>
                    </li>
                    <li>
                      <a href="calendar.html" >
                        <span class="nav-text">Calendar</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe8f0;
                        <span ui-include="'assets/images/i_2.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Layouts</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="headers.html" >
                        <span class="nav-text">Header</span>
                      </a>
                    </li>
                    <li>
                      <a href="asides.html" >
                        <span class="nav-text">Aside</span>
                      </a>
                    </li>
                    <li>
                      <a href="footers.html" >
                        <span class="nav-text">Footer</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a href="widget.html" >
                    <span class="nav-icon">
                      <i class="material-icons">&#xe8d2;
                        <span ui-include="'assets/images/i_3.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Widgets</span>
                  </a>
                </li>
            
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Components</small>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label">
                      <b class="label label-sm accent">8</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe429;
                        <span ui-include="'assets/images/i_4.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">UI kit</span>
                  </a>
                  <ul class="nav-sub nav-mega nav-mega-3">
                    <li>
                      <a href="arrow.html" >
                        <span class="nav-text">Arrow</span>
                      </a>
                    </li>
                    <li>
                      <a href="box.html" >
                        <span class="nav-text">Box</span>
                      </a>
                    </li>
                    <li>
                      <a href="button.html" >
                        <span class="nav-text">Button</span>
                      </a>
                    </li>
                    <li>
                      <a href="color.html" >
                        <span class="nav-text">Color</span>
                      </a>
                    </li>
                    <li>
                      <a href="dropdown.html" >
                        <span class="nav-text">Dropdown</span>
                      </a>
                    </li>
                    <li>
                      <a href="grid.html" >
                        <span class="nav-text">Grid</span>
                      </a>
                    </li>
                    <li>
                      <a href="icon.html" >
                        <span class="nav-text">Icon</span>
                      </a>
                    </li>
                    <li>
                      <a href="label.html" >
                        <span class="nav-text">Label</span>
                      </a>
                    </li>
                    <li>
                      <a href="list.html" >
                        <span class="nav-text">List Group</span>
                      </a>
                    </li>
                    <li>
                      <a href="modal.html" >
                        <span class="nav-text">Modal</span>
                      </a>
                    </li>
                    <li>
                      <a href="nav.html" >
                        <span class="nav-text">Nav</span>
                      </a>
                    </li>
                    <li>
                      <a href="progress.html" >
                        <span class="nav-text">Progress</span>
                      </a>
                    </li>
                    <li>
                      <a href="social.html" >
                        <span class="nav-text">Social</span>
                      </a>
                    </li>
                    <li>
                      <a href="sortable.html" >
                        <span class="nav-text">Sortable</span>
                      </a>
                    </li>
                    <li>
                      <a href="streamline.html" >
                        <span class="nav-text">Streamline</span>
                      </a>
                    </li>
                    <li>
                      <a href="timeline.html" >
                        <span class="nav-text">Timeline</span>
                      </a>
                    </li>
                    <li>
                      <a href="map.vector.html" >
                        <span class="nav-text">Vector Map</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label"><b class="label no-bg">9</b></span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe3e8;
                        <span ui-include="'assets/images/i_5.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Pages</span>
                  </a>
                  <ul class="nav-sub nav-mega">
                    <li>
                      <a href="profile.html" >
                        <span class="nav-text">Profile</span>
                      </a>
                    </li>
                    <li>
                      <a href="setting.html" >
                        <span class="nav-text">Setting</span>
                      </a>
                    </li>
                    <li>
                      <a href="search.html" >
                        <span class="nav-text">Search</span>
                      </a>
                    </li>
                    <li>
                      <a href="faq.html" >
                        <span class="nav-text">FAQ</span>
                      </a>
                    </li>
                    <li>
                      <a href="gallery.html" >
                        <span class="nav-text">Gallery</span>
                      </a>
                    </li>
                    <li>
                      <a href="invoice.html" >
                        <span class="nav-text">Invoice</span>
                      </a>
                    </li>
                    <li>
                      <a href="price.html" >
                        <span class="nav-text">Price</span>
                      </a>
                    </li>
                    <li>
                      <a href="blank.html" >
                        <span class="nav-text">Blank</span>
                      </a>
                    </li>
                    <li>
                      <a href="signin.html" >
                        <span class="nav-text">Sign In</span>
                      </a>
                    </li>
                    <li>
                      <a href="signup.html" >
                        <span class="nav-text">Sign Up</span>
                      </a>
                    </li>
                    <li>
                      <a href="forgot-password.html" >
                        <span class="nav-text">Forgot Password</span>
                      </a>
                    </li>
                    <li>
                      <a href="lockme.html" >
                        <span class="nav-text">Lockme Screen</span>
                      </a>
                    </li>
                    <li>
                      <a href="404.html" >
                        <span class="nav-text">Error 404</span>
                      </a>
                    </li>
                    <li>
                      <a href="505.html" >
                        <span class="nav-text">Error 505</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe39e;
                        <span ui-include="'assets/images/i_6.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Form</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="form.layout.html" >
                        <span class="nav-text">Form Layout</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.element.html" >
                        <span class="nav-text">Form Element</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.validation.html" >
                        <span class="nav-text">Form Validation</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.select.html" >
                        <span class="nav-text">Select</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.editor.html" >
                        <span class="nav-text">Editor</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.picker.html">
                        <span class="nav-text">Picker</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.wizard.html">
                        <span class="nav-text">Wizard</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.dropzone.html" class="no-ajax" >
                        <span class="nav-text">File Upload</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe896;
                        <span ui-include="'assets/images/i_7.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Tables</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="static.html" >
                        <span class="nav-text">Static table</span>
                      </a>
                    </li>
                    <li>
                      <a href="datatable.html" >
                        <span class="nav-text">Datatable</span>
                      </a>
                    </li>
                    <li>
                      <a href="footable.html" >
                        <span class="nav-text">Footable</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label hidden-folded">
                      <b class="label label-sm info">N</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe1b8;
                        <span ui-include="'assets/images/i_8.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Charts</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="chart.html" >
                        <span class="nav-text">Chart</span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="nav-caret">
                          <i class="fa fa-caret-down"></i>
                        </span>
                        <span class="nav-text">Echarts</span>
                      </a>
                      <ul class="nav-sub">
                        <li>
                          <a href="echarts-line.html" >
                            <span class="nav-text">line</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-bar.html" >
                            <span class="nav-text">Bar</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-pie.html" >
                            <span class="nav-text">Pie</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-scatter.html" >
                            <span class="nav-text">Scatter</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-radar-chord.html" >
                            <span class="nav-text">Radar &amp; Chord</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-gauge-funnel.html" >
                            <span class="nav-text">Gauges &amp; Funnel</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-map.html" >
                            <span class="nav-text">Map</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
            
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Help</small>
                </li>
                
                <li class="hidden-folded" >
                  <a href="docs.html" >
                    <span class="nav-text">Documents</span>
                  </a>
                </li>
            
              </ul>
          </nav>
      </div>
      <div flex-no-shrink class="b-t">
        <div class="nav-fold">
        	<a href="profile.html">
        	    <span class="pull-left">
        	      <img src="assets/images/a0.jpg" alt="..." class="w-40 img-circle">
        	    </span>
        	    <span class="clear hidden-folded p-x">
        	      <span class="block _500">Jean Reyes</span>
        	      <small class="block text-muted"><i class="fa fa-circle text-success m-r-sm"></i>online</small>
        	    </span>
        	</a>
        </div>
      </div>
    </div>
  </div>
  <!-- / -->
  
  <!-- content -->
  <div id="content" class="app-content box-shadow-z0" role="main">
    <div class="app-header white box-shadow">
        <div class="navbar">
            <!-- Open side - Naviation on mobile -->
            <a data-toggle="modal" data-target="#aside" class="navbar-item pull-left hidden-lg-up">
              <i class="material-icons">&#xe5d2;</i>
            </a>
            <!-- / -->
        
            <!-- Page title - Bind to $state's title -->
            <div class="navbar-item pull-left h5" ng-bind="$state.current.data.title" id="pageTitle"></div>
        
            <!-- navbar right -->
            <ul class="nav navbar-nav pull-right">
              <li class="nav-item dropdown pos-stc-xs">
                <a class="nav-link" href data-toggle="dropdown">
                  <i class="material-icons">&#xe7f5;</i>
                  <span class="label label-sm up warn">3</span>
                </a>
                <div ui-include="'../views/blocks/dropdown.notification.html'"></div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link clear" href data-toggle="dropdown">
                  <span class="avatar w-32">
                    <img src="assets/images/a0.jpg" alt="...">
                    <i class="on b-white bottom"></i>
                  </span>
                </a>
                <div ui-include="'../views/blocks/dropdown.user.html'"></div>
              </li>
              <li class="nav-item hidden-md-up">
                <a class="nav-link" data-toggle="collapse" data-target="#collapse">
                  <i class="material-icons">&#xe5d4;</i>
                </a>
              </li>
            </ul>
            <!-- / navbar right -->
        
            <!-- navbar collapse -->
            <div class="collapse navbar-toggleable-sm" id="collapse">
              <div ui-include="'../views/blocks/navbar.form.right.html'"></div>
              <!-- link and dropdown -->
              <ul class="nav navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link" href data-toggle="dropdown">
                    <i class="fa fa-fw fa-plus text-muted"></i>
                    <span>New</span>
                  </a>
                  <div ui-include="'../views/blocks/dropdown.new.html'"></div>
                </li>
              </ul>
              <!-- / -->
            </div>
            <!-- / navbar collapse -->
        </div>
    </div>
    <div class="app-footer">
      <div class="p-a text-xs">
        <div class="pull-right text-muted">
          &copy; Copyright <strong>Flatkit</strong> <span class="hidden-xs-down">- Built with Love v1.1.3</span>
          <a ui-scroll-to="content"><i class="fa fa-long-arrow-up p-x-sm"></i></a>
        </div>
        <div class="nav">
          <a class="nav-link" href="../">About</a>
          <span class="text-muted">-</span>
          <a class="nav-link label accent" href="http://themeforest.net/user/flatfull/portfolio?ref=flatfull">Get it</a>
        </div>
      </div>
    </div>
    <div ui-view class="app-body" id="view">

<!-- ############ PAGE START-->
<div class="padding">
  <h6>Social icons</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social white" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social white" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>
  <h6>Dark style</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social grey" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social grey" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>
  <h6>Rounded</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social white rounded" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social white rounded" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>

  <h6>Dark rounded</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social grey rounded" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social grey rounded" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>

  <h6>Large icons</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social white btn-lg" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-lg" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>


  <h6>Small icons</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social white btn-sm" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook indigo"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious blue-A700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal light-blue-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android light-green"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5 orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet blue-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon red"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg grey-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify light-green-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit grey-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc light-green-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble pink-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr pink-A200"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk light-blue-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype light-blue"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox blue-400"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud orange-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr blue-grey-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp red-600"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket blue-grey-500"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing cyan-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram light-blue-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid amber-900"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam grey-800"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest red-700"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge blue-300"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow orange"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat green"></i>
    </a>

    <a href class="btn btn-icon btn-social white btn-sm" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq blue-400"></i>
    </a>

  </div>


  <h6>Colored icons</h6>
  <div class="btn-groups m-b">

    <a href class="btn btn-icon btn-social rounded btn-social-colored indigo" title="Facebook" >
        <i class="fa fa-facebook"></i>
        <i class="fa fa-facebook"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue" title="Twitter" >
        <i class="fa fa-twitter"></i>
        <i class="fa fa-twitter"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored red-600" title="Google+" >
        <i class="fa fa-google-plus"></i>
        <i class="fa fa-google-plus"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-A700" title="Delicious" >
        <i class="fa fa-delicious"></i>
        <i class="fa fa-delicious"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue-900" title="PayPal" >
        <i class="fa fa-paypal"></i>
        <i class="fa fa-paypal"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-green" title="Android" >
        <i class="fa fa-android"></i>
        <i class="fa fa-android"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue" title="Google" >
        <i class="fa fa-google"></i>
        <i class="fa fa-google"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored grey-800" title="Apple" >
        <i class="fa fa-apple"></i>
        <i class="fa fa-apple"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue" title="Slack" >
        <i class="fa fa-slack"></i>
        <i class="fa fa-slack"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored orange-700" title="Html5" >
        <i class="fa fa-html5"></i>
        <i class="fa fa-html5"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-700" title="Google Wallet" >
        <i class="fa fa-google-wallet"></i>
        <i class="fa fa-google-wallet"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored red" title="StumbleUpon" >
        <i class="fa fa-stumbleupon"></i>
        <i class="fa fa-stumbleupon"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-300" title="FourSquare" >
        <i class="fa fa-foursquare"></i>
        <i class="fa fa-foursquare"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored grey-900" title="Digg" >
        <i class="fa fa-digg"></i>
        <i class="fa fa-digg"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-green-500" title="Spotify" >
        <i class="fa fa-spotify"></i>
        <i class="fa fa-spotify"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored grey-300" title="Reddit" >
        <i class="fa fa-reddit"></i>
        <i class="fa fa-reddit"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-green-700" title="Creative Commons" >
        <i class="fa fa-cc"></i>
        <i class="fa fa-cc"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored pink-400" title="Dribbble" >
        <i class="fa fa-dribbble"></i>
        <i class="fa fa-dribbble"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue-800" title="LinkedIn" >
        <i class="fa fa-linkedin"></i>
        <i class="fa fa-linkedin"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored pink-A200" title="Flickr" >
        <i class="fa fa-flickr"></i>
        <i class="fa fa-flickr"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue-600" title="VK" >
        <i class="fa fa-vk"></i>
        <i class="fa fa-vk"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored orange" title="RSS" >
        <i class="fa fa-rss"></i>
        <i class="fa fa-rss"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue" title="Skype" >
        <i class="fa fa-skype"></i>
        <i class="fa fa-skype"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored red-600" title="Youtube" >
        <i class="fa fa-youtube"></i>
        <i class="fa fa-youtube"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-400" title="Dropbox" >
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored orange-700" title="SoundCloud" >
        <i class="fa fa-soundcloud"></i>
        <i class="fa fa-soundcloud"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-grey-600" title="Trumblr" >
        <i class="fa fa-tumblr"></i>
        <i class="fa fa-tumblr"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-800" title="Wordpress" >
        <i class="fa fa-wordpress"></i>
        <i class="fa fa-wordpress"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored red-600" title="Yelp" >
        <i class="fa fa-yelp"></i>
        <i class="fa fa-yelp"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-grey-500" title="Bit Bucket" >
        <i class="fa fa-bitbucket"></i>
        <i class="fa fa-bitbucket"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored cyan-900" title="Xing" >
        <i class="fa fa-xing"></i>
        <i class="fa fa-xing"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored light-blue-800" title="Instagram" >
        <i class="fa fa-instagram"></i>
        <i class="fa fa-instagram"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored amber-900" title="OpenId" >
        <i class="fa fa-openid"></i>
        <i class="fa fa-openid"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored grey-800" title="Steam" >
        <i class="fa fa-steam"></i>
        <i class="fa fa-steam"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored red-700" title="Pinterst" >
        <i class="fa fa-pinterest"></i>
        <i class="fa fa-pinterest"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-300" title="GE" >
        <i class="fa fa-ge"></i>
        <i class="fa fa-ge"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored orange" title="Stack Overflow" >
        <i class="fa fa-stack-overflow"></i>
        <i class="fa fa-stack-overflow"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored green" title="Wechat" >
        <i class="fa fa-wechat"></i>
        <i class="fa fa-wechat"></i>
    </a>

    <a href class="btn btn-icon btn-social rounded btn-social-colored blue-400" title="QQ" >
        <i class="fa fa-qq"></i>
        <i class="fa fa-qq"></i>
    </a>

  </div>
</div>

<!-- ############ PAGE END-->

    </div>
  </div>
  <!-- / -->

  <!-- theme switcher -->
  <div id="switcher">
    <div class="switcher box-color dark-white text-color" id="sw-theme">
      <a href ui-toggle-class="active" target="#sw-theme" class="box-color dark-white text-color sw-btn">
        <i class="fa fa-gear"></i>
      </a>
      <div class="box-header">
        <a href="https://themeforest.net/item/flatkit-app-ui-kit/13231484?ref=flatfull" class="btn btn-xs rounded danger pull-right">BUY</a>
        <h2>Theme Switcher</h2>
      </div>
      <div class="box-divider"></div>
      <div class="box-body">
        <p class="hidden-md-down">
          <label class="md-check m-y-xs"  data-target="folded">
            <input type="checkbox">
            <i class="green"></i>
            <span class="hidden-folded">Folded Aside</span>
          </label>
          <label class="md-check m-y-xs" data-target="boxed">
            <input type="checkbox">
            <i class="green"></i>
            <span class="hidden-folded">Boxed Layout</span>
          </label>
          <label class="m-y-xs pointer" ui-fullscreen>
            <span class="fa fa-expand fa-fw m-r-xs"></span>
            <span>Fullscreen Mode</span>
          </label>
        </p>
        <p>Colors:</p>
        <p data-target="themeID">
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'primary', accent:'accent', warn:'warn'}">
            <input type="radio" name="color" value="1">
            <i class="primary"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'accent', accent:'cyan', warn:'warn'}">
            <input type="radio" name="color" value="2">
            <i class="accent"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'warn', accent:'light-blue', warn:'warning'}">
            <input type="radio" name="color" value="3">
            <i class="warn"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'success', accent:'teal', warn:'lime'}">
            <input type="radio" name="color" value="4">
            <i class="success"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'info', accent:'light-blue', warn:'success'}">
            <input type="radio" name="color" value="5">
            <i class="info"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'blue', accent:'indigo', warn:'primary'}">
            <input type="radio" name="color" value="6">
            <i class="blue"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'warning', accent:'grey-100', warn:'success'}">
            <input type="radio" name="color" value="7">
            <i class="warning"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'danger', accent:'grey-100', warn:'grey-300'}">
            <input type="radio" name="color" value="8">
            <i class="danger"></i>
          </label>
        </p>
        <p>Themes:</p>
        <div data-target="bg" class="text-u-c text-center _600 clearfix">
          <label class="p-a col-xs-6 light pointer m-a-0">
            <input type="radio" name="theme" value="" hidden>
            Light
          </label>
          <label class="p-a col-xs-6 grey pointer m-a-0">
            <input type="radio" name="theme" value="grey" hidden>
            Grey
          </label>
          <label class="p-a col-xs-6 dark pointer m-a-0">
            <input type="radio" name="theme" value="dark" hidden>
            Dark
          </label>
          <label class="p-a col-xs-6 black pointer m-a-0">
            <input type="radio" name="theme" value="black" hidden>
            Black
          </label>
        </div>
      </div>
    </div>
    
    <div class="switcher box-color black lt" id="sw-demo">
      <a href ui-toggle-class="active" target="#sw-demo" class="box-color black lt text-color sw-btn">
        <i class="fa fa-list text-white"></i>
      </a>
      <div class="box-header">
        <h2>Demos</h2>
      </div>
      <div class="box-divider"></div>
      <div class="box-body">
        <div class="text-u-c text-center _600 clearfix">
          <a href="index.html"
            class="p-a col-xs-6 primary">
            <span class="text-white">Default</span>
          </a>
          <a href="dashboard.0.html"
            class="p-a col-xs-6 success">
            <span class="text-white">Zero</span>
          </a>
          <a href="dashboard.1.html"
            class="p-a col-xs-6 blue">
            <span class="text-white">One</span>
          </a>
          <a href="dashboard.2.html"
            class="p-a col-xs-6 warn">
            <span class="text-white">Two</span>
          </a>
          <a href="dashboard.3.html"
            class="p-a col-xs-6 danger">
            <span class="text-white">Three</span>
          </a>
          <a href="dashboard.4.html"
            class="p-a col-xs-6 green">
            <span class="text-white">Four</span>
          </a>
          <a href="dashboard.5.html"
            class="p-a col-xs-6 info">
            <span class="text-white">Five</span>
          </a>
          <div 
            class="p-a col-xs-6 lter">
            <span class="text">...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / -->

<!-- ############ LAYOUT END-->

  </div>
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
  <script src="libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
  <script src="libs/jquery/tether/dist/js/tether.min.js"></script>
  <script src="libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
  <script src="libs/jquery/underscore/underscore-min.js"></script>
  <script src="libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
  <script src="libs/jquery/PACE/pace.min.js"></script>

  <script src="scripts/config.lazyload.js"></script>

  <script src="scripts/palette.js"></script>
  <script src="scripts/ui-load.js"></script>
  <script src="scripts/ui-jp.js"></script>
  <script src="scripts/ui-include.js"></script>
  <script src="scripts/ui-device.js"></script>
  <script src="scripts/ui-form.js"></script>
  <script src="scripts/ui-nav.js"></script>
  <script src="scripts/ui-screenfull.js"></script>
  <script src="scripts/ui-scroll-to.js"></script>
  <script src="scripts/ui-toggle-class.js"></script>

  <script src="scripts/app.js"></script>

  <!-- ajax -->
  <script src="libs/jquery/jquery-pjax/jquery.pjax.js"></script>
  <script src="scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>