Bootstrap-Select Doesn't show ticks next to selected parameters (multiple)
I have a problem with a selector where I define as:
<select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple>
However, when I select data, it doesn't show me a checkmark next to the options. I am using bootstrap 2.3.2 with bootstrap-select. I have css and js of these added to my assertions. I can select and receive values, however, I cannot see ticks next to the parameters when I select them.
Greetings,
source to share
It's always a good idea to review the scripts you are using, even if they don't really matter, they will make sense after a while.
Link: https://github.com/caseyjhol/bootstrap-select/blob/master/bootstrap-select.js
See lines 942-965 and find 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
...
};
The default is glyphicon, part of Bootstrap 3. You will need to install this font, or you can use the font Awesome (go to their website, follow the instructions) and change two values when you call the script:
$('.selectpicker').selectpicker({
iconBase: 'NameofFOnt',
tickIcon: 'classname'
});
source to share
add font awesome css to HTML page.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
and replace them in bootstrap-select.js
andbootstrap-select.min.js
iconBase: 'glyphicon', tickIcon: 'glyphicon-ok'
to
iconBase:"fontawesome",tickIcon:"fa fa-check"
source to share