Jual Beli Produk Digital - Cepat, Aman, Dan Terpercaya Sejak 2012 (Ada 69489 Members, 811 Products, 4734 Topic, 13083 Comments)

Font Awesome (fa) menampilkan icon di array php pada select option

Dibuat
Login Terakhir 8 Bulan lalu,
Telah Dilihat 3551 Kali
Munajat Ibnu Mengatakan : Sultan Account 
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3. <?php
  4. $icons = array (
  5.   0 => 'fa-money', //4
  6.   1 => 'fa-object-ungroup', //3
  7.   2 => 'fa-phone', //1
  8.   3 => 'fa-print', //5
  9.   4 => 'fa-send', //2
  10. );
  11. $html ='';
  12. foreach ($icons as $key => $value) {
  13.     $html .= '<option data-icon="fa '.$value.'">'.$value.' </option>';
  14. }
  15. ?>
  16. <!doctype html>
  17. <html lang="en">
  18.   <head>
  19.     <!-- Required meta tags -->
  20.     <meta charset="utf-8">
  21. 	<meta name="author" content="ghoblin" />
  22.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  23.  
  24.     <!-- Bootstrap CSS -->
  25.     <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  26. 	<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" rel="stylesheet" />
  27. 	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  28.     <title>Fa Icon Select | by: Munajat Ibnu</title>
  29. <style>
  30. .footer {
  31.   position: absolute;
  32.   bottom: 0;
  33.   width: 100%;
  34.   height: 60px; /* Set the fixed height of the footer here */
  35.   line-height: 60px; /* Vertically center the text there */
  36.   background-color: #f5f5f5;
  37. }
  38.  
  39.  
  40. /* Custom page CSS
  41. -------------------------------------------------- */
  42. /* Not required for template or sticky footer method. */
  43.  
  44. .container {
  45.   width: auto;
  46.   max-width: 780px;
  47.   padding: 0 15px;
  48. }
  49. .pd-top{padding:100px 0 0 0}
  50. pre {
  51.     display: block;
  52.     unicode-bidi: embed;
  53.     font-family: monospace;
  54.     white-space: pre;
  55. 	background-color:#f7f7f7;
  56. 	padding:10px
  57. }
  58. </style>
  59.   </head>
  60.   <body>
  61. <div class="container pd-top">
  62. <div class="row">
  63. <div class="col-md-12">
  64. <h1>Fa Icon Select</h1>
  65. <div class="form-group">
  66. <select name='icon' class="selectpicker form-control" data-live-search="true">
  67. <?=$html;?>
  68. </select>
  69. </div>
  70. </div>
  71. </div>
  72. <pre>
  73. <?php
  74. print_r($icons);
  75. ?>
  76. </pre>
  77. </div>
  78. <footer class="footer">
  79.       <div class="container">
  80.         <span class="text-muted">by. Munajat Ibnu</span>
  81.       </div>
  82.     </footer>
  83.     <!-- Optional JavaScript -->
  84.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  85.     <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  86.     <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  87.     <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  88.     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.js"></script>
  89.   </body>
  90. </html>
  91.  
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase

Online