ハッシュアイコンを表示するドロップダウンオプションのフォントAwesome Unicodeアイコン

Question

（一般的な問題：ドロップダウンアイテムに色付きアイコン（四角形）を表示する必要があります）色は動的に決定され、形状は常に正方形です。私に知らせてください）

アイコンをドロップダウンに表示する必要がありますが、そこにイメージを配置するのは難しいので（オプションの中にIタグを入れることはできません）、私は追加の回避策を使用していますFont-Awesome（FA）Unicodeイメージ。

以下のように各オプションに 'fa-square'を追加する必要があります。私のオプション値を動的配列から生成される

f0c8  ->  

http://fontawesome.io/icon/square/

で次のようにそのコードの下によると、私は追加しています：

$.each(items, function(i, item) { 
    $('#dropdown').append($('<option></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle)); 
}); 

しかし、どんなに私がFirefoxの何をすべきか次のハッシュイメージを示します。物事は私が試してみた：

1）を選択してくださいフォント-恐ろしいフォントファミリ

<select id="dropdown" style="font-family: 'Font-Awesome'"> 

（これは、https://github.com/FortAwesome/Font-Awesome/issues/996ここで提案した）

2）を確認していOptionは、すべてのオプションに対してfaクラスを持ちます。

$('#dropdown').append($('<option class="fa"></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle)); 

Font-Awesome CSSが読み込まれ、プロジェクトで利用可能です。何かご意見は？

Answer 1

私の現在のドロップダウンリストには、のSelect2というプラグインが使用されています。私はSelect2のtemplateResult/templateSelectionフォーマット方法を使ってこれを達成できました。私は私のオプションのに持って

$('#dropdown').select2(
            templateResult: format, 
            templateSelection: format, 
            escapeMarkup: function (m) { 
              return m; 
            } 
           }); 

function format(option) { 
    var color = $(option.element).attr('data-color'); 
    return '<i class="fa fa-square" style="color : ' + color + '"></i> ' + option.text; 
}; 

注data-color attrが、これはSelectセレクトの書式設定参照関数内の検索は、個々のボックスの色を決定することができます。あなたは `フォントファミリを使用する必要があります

<option data-color="..."></option>