ノックアウトのアイコンを含むドロップダウンメニュー

Question

個別のオプション値ごとにfontawesomeからの異なるアイコンを持つドロップダウンを作成する方法はありますか？または、各値のブラケットの色を変更できますか？私はfontawesomeの円アイコンを好んでいます。ここで、リストのすべてのレコードの色を変更できます。

私はHTML部分に

<select data-bind="options: someList, optionsText: 'dropdownItemName', optionsValue: 'dropdownItemId', value: selectedSomeList, optionsCaption: ''" style="font-family: FontAwesome">&#xf111;</select> 

をアイコンのFontawesomecodeを追加しようとした私はまた<i></i>タグにそれを追加しようとしましたが、それは何もしません。

誰かがアイデアを持っていますか？助けてくれてありがとう、あなたは

Answer 1

あなたは（Unicode値がのフォント素晴らしいサイト上の各アイコンに指定されている）結合optionTextのアイコンのためのUnicodeを追加することができます。

var viewModel = function() { 
 
    
 
    this.values = ko.observableArray([{ 
 
    text: 'address-book \uf2b9', 
 
    value: 1 
 
    }, { 
 
    text: 'bookmark \uf02e', 
 
    value: 2 
 
    }, { 
 
    text: 'location-arrow \uf124', 
 
    value: 3 
 
    }]); 
 
    
 
    this.selectedValue = ko.observable(2); 
 
} 
 

 
ko.applyBindings(new viewModel());

select { 
 
    font-family: 'FontAwesome', 'Second Font name' 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<select data-bind="options: values, 
 
        optionsText: 'text', 
 
        optionsValue: 'value', 
 
        value: selectedValue"> 
 
</select>

（私はthis answerからアイデアを借りましたが、アイコンの代わりにと表示されていました。