You could use jQuery
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume')) {
el.removeClass('icon-volume');
el.addClass('icon-volume-off');
} else {
el.removeClass('icon-volume-off');
el.addClass('icon-volume');
}
});
Or you could just add the icon-volume-off
class and make sure its css takes precedence over the icon-volume
class
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume-off')) {
el.removeClass('icon-volume-off');
} else {
el.addClass('icon-volume-off');
}
});