CODEWITHSUNDEEP
javascriptjqueryhtmlfont-awesome
en Peris
en Peris

Reputation: 1717

Changing the class of an AwesomeIcon dynamically with JQuery

I have this awesome Icon

<i id="myIdAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>

which I tried to change the class using

 $('myIdAwesomeIcon').addClass('fa fa-toggle-on fa-lg').removeClass('fa fa-toggle-off fa-lg');

something changed but the result is not the expected:

enter image description here

Upvotes: 1

Views: 293

Answers (3)

Kiran Shahi
Kiran Shahi

Reputation: 7970

removeClass('fa fa-toggle-off fa-lg'); removes fa, fa-toggle-on and fa-lg in your case you need to remove and add only unique classes. Hence your code will look like as follows:

$('#myIdAwesomeIcon').addClass('fa-toggle-on').removeClass('fa-toggle-off');

Note: # for id and . for class is required as selector in jQuery.

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You are missing the # for id selector and I recommend to use removeClass first and then addClass. Since, your css color was so light, for this example I changed the color to red.

$('#myIdAwesomeIcon').removeClass('fa fa-toggle-off fa-lg').addClass('fa fa-toggle-on fa-lg');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="myIdAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:red;" aria-hidden="true">ss</i>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

Your net result is to remove the fa and fa-lg classes. If you just want to change the toggle-on to toggle-off, use toggleClass(), like this:

$('#myIdAwesomeIcon').toggleClass('fa-toggle-on fa-toggle-off');

Upvotes: 2

Related Questions