Cara menggunakan glyphicon Bootstrap 3 di html pilih
Saya perlu membuat subset dari Bootstrap 3 glyphicons yang dapat dipilih di ui saya oleh pengguna.
Saya mencoba ini:
<select class="form-control">
<option><span class="glyphicon glyphicon-cutlery"></span></option>
<option><span class="glyphicon glyphicon-eye-open"></span></option>
<option><span class="glyphicon glyphicon-heart-empty"></span></option>
<option><span class="glyphicon glyphicon-leaf"></span></option>
<option><span class="glyphicon glyphicon-music"></span></option>
<option><span class="glyphicon glyphicon-send"></span></option>
<option><span class="glyphicon glyphicon-star"></span></option>
</select>Namun yang saya dapatkan hanyalah baris kosong. Setiap bantuan atau saran alternatif dihargai.
Sepengetahuan saya, satu-satunya cara untuk mencapai hal ini dalam pemilihan asli adalah dengan menggunakan representasi unicode dari font. Anda harus menerapkan font glyphicon ke pilihan dan karena itu tidak dapat mencampurnya dengan font lain. Namun, glyphicon termasuk karakter biasa, sehingga Anda dapat menambahkan teks. Sayangnya, pengaturan font untuk opsi individual tampaknya tidak mungkin dilakukan.
<select class="form-control glyphicon">
<option value="">− − − Hello</option>
<option value="glyphicon-list-alt"> Text</option>
</select>Berikut'adalah daftar ikon dengan unicode-nya:
Saya tidak berpikir bahwa HTML select standar akan menampilkan konten HTML. Saya sarankan untuk memeriksa Bootstrap select: http://silviomoreto.github.io/bootstrap-select/
Ini memiliki beberapa opsi untuk menampilkan ikon atau markup HTML lainnya di select.
<select id="mySelect" data-show-icon="true">
<option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
<option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>Berikut adalah demo: https://www.codeply.com/go/l6ClKGBmLS
Saya akhirnya menggunakan tombol dropdown bootstrap 3, saya memposting solusi saya di sini jika itu membantu seseorang di masa depan. Menambahkan daftar-baris bootstrap 3 ke kelas untuk ul menyebabkannya ditampilkan dalam format yang kompak juga.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select icon <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li><span class="glyphicon glyphicon-cutlery"></span></li>
<li><span class="glyphicon glyphicon-fire"></span></li>
<li><span class="glyphicon glyphicon-glass"></span></li>
<li><span class="glyphicon glyphicon-heart"></span></li>
</ul>
</div>Saya menggunakan Angular.js jadi ini adalah kode aktual yang saya gunakan:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Avatar <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)">
<span ng-class="getAvatar(avatar)"></span>
</li>
</ul>
</div>Dan di pengontrol saya:
$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud'];
$scope.getAvatar=function(avatar){
return 'glyphicon glyphicon-'+avatar;
};
