web-dev-qa-db-ja.com

オプションのアイコン-Bootstrap + Font-awesome

選択リストのオプションにアイコンを埋め込みます。フォントの素晴らしいアイコンを使用して、アイコンが表示されていません。

<select>
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>

Font-awesomeを使用して必要なものを実現できますか？または、font-awesomeを使用してスクラップし、各オプションの手動のCSS背景を行う必要がありますか？

JSFiddle： http://jsfiddle.net/mmXh2/1/

htmlcsstwitter-bootstrapoptionfont-awesome
18
Monokh

FontAwesomeをUnicodeフォントとして使用し、クロスプラットフォームの方法でアイコンを挿入できます。各アイコンのUnicode値を調べる必要があります

<select style="font-family: 'FontAwesome', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>
19
Sanojian

あなたは少しチートして、オプションにクラスを置くことができます：

http://jsfiddle.net/mmXh2/2/

<option class="icon-camera-retro"> Doesn't work in option!</option>
5
Billy Moat

どうやらSelect2（ http://ivaynberg.github.io/select2/ ）は、オプションタグにアイコンを配置するためのソリューションです。しかし、おそらく私の知識不足のため、私はそれを機能させることができませんでした。最後に、リストを使用することにしました（Bootstrapも使用していました）

<a class="btn dropdown-toggle category" data-toggle="dropdown" href="#">All Categories <span class="caret pull-right"></span></a>
<ul id="category" class="dropdown-menu">
    <li><a href="#"><i class="icon"></i> Category A</a></li>
    <li><a href="#"><i class="icon"></i> Category B</a></li>
    ..
</ul>

ただし、リストのIDは一意でなければならないという欠点があります。したがって、私のように1ページに5つの異なるリストがある場合、javascriptでそれらすべてを宣言（？）して、コードを分厚いものにする必要があります。

$(function(){
  $("#category li a").click(function(){
    $(".category").val($(this).text());
  });
});

少しでも光を当てることができれば幸いです。

2
Jennift

Chrome=で動作するアイコンの解決策が与えられました 同様の質問で 。

JSFiddleの例

使用されるコード：

function format(icon) {
    var originalOption = icon.element;
    return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.wpmse_select2').select2({
    width: "100%",
    formatResult: format
});
0
Jayden Lawson

select2 のようなプラグインを使用します

動作する jsfiddle

<select id="icon_select" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option>
  <option value="fa-music">&amp;#xf001; fa-music</option>
</select>
0
Jeremy Lynch