Open with fade-zoom animation

Stay ahead...
Receive latest updates directly in your Inbox!

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 the select field.

To add icons in select option text we have to use the bootstrap-select plugin, which is a 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.


[wd_hustle id=”mailchimp-popup”]


  • Austin Chauvette Reply

    ...Shared to Facebook

    2017-07-17 07:39:41
  • Courtney Stalter Reply

    Great read.

    2017-07-17 03:47:05

Leave a comment

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