0

Is there any possible way to create a dropdown that has a diffrent icon from fontawesome for each individuel option value? Or can I change the brackground color of each value? I prefer the circle icon from fontawesome where I can change the color of every record in the list.

I tried to add the Fontawesomecode of an Icon in the html part

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

I also tried to add it into the a <i></i> tag but it does nothing.

Does someone have an idea? Thanks you for the help

loonybin
  • 65
  • 1
  • 14

2 Answers2

1

You can add the Unicode for the icon in the optionText binding (Unicode values are specified for each icon on font-awesome's site):

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>

(I borrowed the idea from this answer. But, it was being displayed as &#xf042; instead of the icon. It took a while to figure out)

adiga
  • 34,372
  • 9
  • 61
  • 83
1

I might be late. But try this one. jsfiddle

var viewModel = function() {
  
  this.values = ko.observableArray([{
    text: 'Visa',
    value: 1,
    icon:'fa-cc-visa'
  }, {
    text: 'Discover',
    value: 2,
    icon:'fa-cc-discover'
  }, {
    text: 'Amex',
    value: 3,
    icon:'fa-cc-amex'
  }]);
  
  OptionsAfterRender = (option, item) => {
        
        ko.applyBindingsToNode(option, { css:  item.icon }, item);
    };
  
  
  this.selectedValue = ko.observable(2);
}

ko.applyBindings(new viewModel());
<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 style="font-family:fontAwesome" multiple="multiple" size="3" data-bind="options: values, 
                  optionsText: 'text', 
                  optionsValue: 'value', 
                  value: selectedValue,
                  optionsAfterRender:OptionsAfterRender">
</select>
Josie
  • 21
  • 6
  • Hi Navya, Your answer is good. I tried your answer it actually did not work for me but then I ran the code snippet that you have given, yours seem to work fine. After debug I realized you have added ::before binding to your classes. But I tried do the same. Doesn't seem to help. Can you let me know how you activated ::before on your class? – Kavya Rani Mar 08 '19 at 10:54
  • Hi Kavya, I applied the style on the drop-down itself. If you look at my dropdown i set the style property as "font-family:fontAwesome". I have not added any custom styles to my dorpdown and classes apart from adding the style property to dropdown. – Josie Mar 11 '19 at 16:00
  • Hi Navya, Thank you for your answer. Actually the psuedo-elements do not actually play well with Select and Option tag without the attribute multiple="multiple". Its ok I found work around for it. I replaced optionsText as optionsText: (ele) => unicodesObj[ele.icon] + '\t' + ele.text – Kavya Rani May 09 '19 at 07:05