Bootstrap-Select Does not shows ticks next to selected options(Multiple)

Question

I have an issue with selector where I am defining as:

 <select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple> 

However, When I am selecting the data, it doesn't show me the ticks next to the options. I am using bootstrap 2.3.2 with bootstrap-select. I have the css and js of them added to my asserts. I can choose and get the values however, I am not able to see the ticks next to the options when I am selecting them.

Cheers,

Answer 1

It's always wise to look through the scripts you are using even if they don't mean much, they will make sense after awhile.

Reference: https://github.com/caseyjhol/bootstrap-select/blob/master/bootstrap-select.js

See lines 942-965 and locate near the bottom:

$.fn.selectpicker.defaults = {
.... // bunch of default settings
iconBase: 'glyphicon', // the font family for the checkmark
tickIcon: 'glyphicon-ok', // classname for the checkmark
...
};

This defaults to glyphicon, part of Bootstrap 3. You will need to install this font or you can use Font Awesome (go to their site, follow instructions) and change the two values when you call the script:

 $('.selectpicker').selectpicker({
   iconBase: 'NameofFOnt',
   tickIcon: 'classname'
});

Answer 2

This "problem" still exists within Bootstrap 4 as Bootstrap-select uses Glyphicon. Putting together all the answers this helped me (BS4.3.1, fa 5.7.1, BS-select 1.13.8):

<select data-icon-base="fas" data-tick-icon="fa-check">

Use the snake case as mentioned here