넉 아웃 아이콘이있는 드롭 다운 메뉴

Question

각 개별 옵션 값에 대한 fontawesome의 다른 아이콘이있는 드롭 다운을 만들 수있는 방법이 있습니까? 또는 각 값의 brackground 색상을 변경할 수 있습니까? 필자는 fontawesome의 원 아이콘을 선호하는데, 목록의 모든 레코드의 색상을 변경할 수 있습니다.

은 내가 또한 <i></i> 태그에 추가하려고하는 HTML 부분

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

에 아이콘의 Fontawesomecode을 추가하려고하지만 아무것도하지 않는다.

누군가 아이디어가 있습니까? 도움을 주셔서 감사합니다 당신은

Answer 1

당신은 (유니 코드 값의 글꼴 멋진 사이트의 각 아이콘에 지정된) 바인딩 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에서 아이디어를 빌 렸지만 아이콘 대신 으로 표시되었습니다. 알아 내기까지 다소 시간이 걸렸습니다.