How to add icons in html select options ??

In one of our recent project, we need to add icons such as fontawesome, glyphicons etc to the options text in HTML select element. But the problem was HTML strips any tags inside option tag of select field.

To add icons in select option text we have to use bootstrap-select plugin, which is great plugin for customizing plain html select with some great customization options using bootstrap style.With this plugin we can style the select element with only simple data attributes or initialize with Javascript.
With this plugin, there are two methods available to add icons to select options

  1. Using “data-icon” attribute we can add any glyphicon icons to an option or optgroup

2. Using “data-content” attribute we can insert custom HTML into the options such as font-awesome tags.

 

No Comments

Leave a comment

Your email address will not be published. Required fields are marked *