coin icons, bootstrap select with custom coin selection

index.html

@@ -11,6 +11,7 @@
     <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
     <link href="css/fuelux.min.css" type="text/css" rel="stylesheet">
     <link href="css/bootstrap-panelnavtabs.css" type="text/css" rel="stylesheet">
+    <link href="css/bootstrap-select.min.css" type="text/css" rel="stylesheet">
     <link href="css/toastr.min.css" type="text/css" rel="stylesheet">
     <link href="js/amcharts/plugins/export/export.css" type="text/css" rel="stylesheet"  media="all" />
     <link href="css/custom.css" type="text/css" rel="stylesheet">
@@ -354,6 +355,54 @@
 
 
         <div class="col-sm-8">
+            <div class="panel panel-default">
+                <div class="panel-heading"><strong>Trading Pair</strong></div>
+                <div class="">
+                  <select class="selectpicker">
+                    <optgroup label="Crytpo Coins">
+                      <option data-content="<img src='img/cryptologo/bitcoin.png' width='25px;'/> Bitcoin (BTC)">BTC</option>
+                      <option data-content="<img src='img/cryptologo/komodo.png' width='25px;'/> Komodo (KMD)">KMD</option>
+                      <option data-content="<img src='img/cryptologo/DOGE.png' width='25px'/> Dogecoin (DOGE)">DOGE</option>
+                      <option data-content="<img src='img/cryptologo/HUSH.png' width='25px'/> Hushcoin (HUSH)">HUSH</option>
+                      <option data-content="<img src='img/cryptologo/DGB.png' width='25px'/> Digibyte (DGB)">DGB</option>
+                      <option data-content="<img src='img/cryptologo/MZC.png' width='25px'/> Mazacoin (MZC)">MZC</option>
+                      <option data-content="<img src='img/cryptologo/SYS.png' width='25px'/> Syscoin (SYS)">SYS</option>
+                      <option data-content="<img src='img/cryptologo/UNO.png' width='25px'/> Unobtanium (UNO)">UNO</option>
+                      <option data-content="<img src='img/cryptologo/ZET.png' width='25px'/> Zetacoin (ZET)">ZET</option>
+                      <option data-content="<img src='img/cryptologo/ZEC.png' width='25px'/> Zcash (ZEC)">ZEC</option>
+                      <option data-content="<img src='img/cryptologo/BTM.png' width='25px'/> Bitmark (BTM)">BTM</option>
+                      <option data-content="<img src='img/cryptologo/CARB.png' width='25px'/> Carboncoin (CARB)">CARB</option>
+                      <option data-content="<img src='img/cryptologo/ANC.png' width='25px'/> Anoncoin (ANC)">ANC</option>
+                      <option data-content="<img src='img/cryptologo/FRK.png' width='25px'/> Franko (FRK)">FRK</option>
+                      <option data-content="<img src='img/cryptologo/GAME.png' width='25px'/> Gamecredits (GAME)">GAME</option>
+                      <option data-content="<img src='img/cryptologo/LTC.png' width='25px'/> Litecoin (LTC)">LTC</option>
+                    </optgroup>
+                    <optgroup label="AssetChains">
+                      <option data-content="<img src='img/cryptologo/DEX.png' width='25px;'/> InstantDEX (DEX)">DEX</option>
+                      <option data-content="<img src='img/cryptologo/JUMBLR.png' width='25px;'/> Jumblr (JUMBLR)">JUMBLR</option>
+                      <option data-content="<img src='img/cryptologo/REVS.png' width='25px'/> REVS (REVS)">REVS</option>
+                      <option data-content="<img src='img/cryptologo/SUPERNET.png' width='25px'/> SUPERNET (SUPERNET)">SUPERNET</option>
+                      <option data-content="<img src='img/cryptologo/WLC.png' width='25px'/> Wireless (WLC)">WLC</option>
+                      <option data-content="<img src='img/cryptologo/PANGEA.png' width='25px'/> Pangea (PANGEA)">PANGEA</option>
+                      <option data-content="<img src='img/cryptologo/DEX.png' width='25px'/> InstantDEX (DEX)">DEX</option>
+                      <option data-content="<img src='img/cryptologo/BET.png' width='25px'/> BET (BET)">BET</option>
+                      <option data-content="<img src='img/cryptologo/CRYPTO.png' width='25px'/> Crypto777 (CRYPTO)">CRYPTO</option>
+                      <option data-content="<img src='img/cryptologo/HODL.png' width='25px'/> HODL (HODL)">HODL</option>
+                      <option data-content="<img src='img/cryptologo/SHARK.png' width='25px'/> SHARK (SHARK)">SHARK</option>
+                      <option data-content="<img src='img/cryptologo/BOTS.png' width='25px'/> BOTS (BOTS)">BOTS</option>
+                      <option data-content="<img src='img/cryptologo/MGW.png' width='25px'/> MultiGateway (MGW)">MGW</option>
+                      <option data-content="<img src='img/cryptologo/MVP.png' width='25px'/> MVP (MVP)">MVP</option>
+                      <option data-content="<img src='img/cryptologo/KV.png' width='25px'/> KeyValue (KV)">KV</option>
+                      <option data-content="<img src='img/cryptologo/CEAL.png' width='25px'/> Ceal (CEAL)">CEAL</option>
+                      <option data-content="<img src='img/cryptologo/MESH.png' width='25px'/> SuperMesh (MESH)">MESH</option>
+                    </optgroup>
+                    <optgroup label="Komodo Currencies">
+                      <option data-content="<img src='img/cryptologo/USD.png' width='25px;'/> US Dollar (USD)">USD</option>
+                      <option data-content="<img src='img/cryptologo/EUR.png' width='25px;'/> Euro (EUR)">EUR</option>
+                    </optgroup>
+                </div>
+            </div>
+
             <div class="panel with-nav-tabs panel-default">
                 <div class="panel-heading">
                         <ul class="nav nav-tabs">
@@ -368,6 +417,7 @@
                     </div>
                 </div>
             </div>
+
         </div>
       </div>
 
@@ -472,6 +522,7 @@
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js" type="text/javascript"></script>
     <script src="js/fuelux.min.js" type="text/javascript"></script>
+    <script src="js/bootstrap-select.min.js" type="text/javascript"></script>
     <script src="js/qrcode.min.js" type="text/javascript"></script>
     <script src="js/toastr.min.js" type="text/javascript"></script>
     <!-- amcharts libs -->