Change class and color of Font Awesome icon on click

Question

When I click on the icon I simply want to change its class and color. This is my code below

$(".sim-row-edit-icon").click(function(){
 alert("Icon clicked");
  // on click please change icon and color to red
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

On click I want to change the li class to class="fa fa-address-book" and color of icon to red.

Please show an example of what you have tried so far. A comment saying "//on click please change icon and color to red" isn't suitable — Aonghas M, Sep 13 '18 at 11:44

score 0 · Answer 1 · answered Sep 13 '18 at 11:38

0

You just need to do something like the following:

$(".sim-row-edit-icon").click(function(){
  alert("Icon clicked");
  $(this).find('i').toggleClass('fa-address-book');
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

answered Sep 13 '18 at 11:38

Omid Nikrah

2,444
3
15
30

and how to change the color to red ? – user2828442 Sep 13 '18 at 11:40
@user2828442 with css method – Omid Nikrah Sep 13 '18 at 11:41
...may be: .toggleClass('fa-camera-retro fa-address-book red') – gaetanoM Sep 13 '18 at 11:44
1

@gaetanoM yes it's possible – Omid Nikrah Sep 13 '18 at 11:44
@OmiD Right for you: I didn't downvote. – gaetanoM Sep 13 '18 at 11:45

score 0 · Answer 2 · answered Sep 13 '18 at 11:39

$(".sim-row-edit-icon").click(function(){
 $(this).find('i').removeClass('fa-camera-retro').addClass('fa-address-book').css('color', 'red');
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Mamun · Answer 3 · 2018-09-13T11:42:07.870

0

You can target the element with find(). Then use removeClass() to remove existing classes and add classes with addClass(). You can use .css() to set the style:

$(".sim-row-edit-icon").click(function(){
  alert("Icon clicked");
  $(this).find('i.fa.fa-camera-retro').removeClass().addClass('fa fa-address-book');
  $(this).find('i').css({color: 'red'});
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

edited Sep 13 '18 at 11:42

answered Sep 13 '18 at 11:40

Mamun

66,969
9
47
59

if there are 2 i's in the div, it erases that, how can it only change the class of the clicked one only – user2828442 Sep 13 '18 at 11:41
@user2828442, then you have to target the existing class of the element. I have updated the answer....please check. – Mamun Sep 13 '18 at 11:44

score 0 · Answer 4 · answered Sep 13 '18 at 11:41

You need to:

remove the existing class - removeClass()
add a new class - addClass()
add color css to the icon - css()

$(".sim-row-edit-icon").click(function(){
 alert("Icon clicked");
  $(this).find('i').removeClass('fa-camera-retro').addClass('fa-address-book').css('color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

score 0 · Answer 5 · answered Sep 13 '18 at 11:42

$(".sim-row-edit-icon").click(function(){
  $(".sim-row-edit-icon > i").removeClass('fa-camera-retro').addClass('fa-address-book');
  $(".sim-row-edit-icon > i").css("color", "red");
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Change class and color of Font Awesome icon on click

5 Answers5