bootstrap glyphicon with bootstrap switch

Question

I'm using bootstrap-switch with bootstrap v3.

I want to use an icon for the text to display on the switch.

If i use font awesome icons like this it works. using font awesome using font awesome and here is the code:

$("[name='pets_check_box']").bootstrapSwitch('onText', '<i class="fa fa-check" aria-hidden="true"></i>');
$("[name='pets_check_box']").bootstrapSwitch('offText', '<i class="fa fa-times" aria-hidden="true"></i>');

and if i use bootstrap glyphicon the icon is not displayed... using bootstrap glyphicon using bootstrap glyphicon here is the code:

$("[name='pets_check_box']").bootstrapSwitch('onText', '<span class="glyphicon glyphicon-ok"></span>');
$("[name='pets_check_box']").bootstrapSwitch('offText', '<span class="glyphicon glyphicon-remove"></span>');

When I'm using glyphicon without bootstrap-switch the glyphicon is working properly. Does anyone have a solution for this?

Answer 1

The latest version of Bootstrap(>= v4.0) will not support the glyphicon icons. In the official site they have mentioned, If you need icons, some options are:

• the upstream version of Glyphicons
• Octicons
• Font Awesome

Find below link for reading the detailed information.

https://v4-alpha.getbootstrap.com/migration/#components

Answer 2

确保你有包含 bootstrap.css 和 bootstrap.css 有以下条目

.glyphicon-ok:before {  content: "\e013";}