Modify the class and color of a Font Awesome icon when clicked

My goal is to change the class and color of an icon when it is clicked. Here is the code I am using:

$(".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>

When the icon is clicked, I want to change the li class to class="fa fa-address-book" and make the color of the icon red.

javascriptjqueryhtmlcssfont-awesome

Answer №1

Here are the steps you should follow:

  1. Delete the current class using removeClass()
  2. Include a new class using addClass()
  3. Apply color CSS to the icon with 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>

Answer №2

To achieve the desired outcome, you can implement the following solution:

$(".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="edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Answer №3

$(".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>

Answer №4

If you want to select a specific element, you can use the find() method in jQuery. To manipulate the classes of an element, you can utilize removeClass() and addClass(). Additionally, you can adjust the style with the .css() method:

$(".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>

Answer №5

$(".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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to showcase information within the Uppy Dashboard Modal

My clients have requested for a custom button and message to be displayed within the Uppy DashboardModal, but I am facing difficulties in implementing this. Can someone please assist me with this? <DashboardModal uppy={uppy} id={this.prop ...

javascriptreactjsuppy

Notification prompt when removing items

I currently have a table set up with a delete <a> tag that allows users to delete data. I would like to add a confirmation message asking the user if they are sure they want to delete before proceeding. I attempted to achieve this using JavaScript bu ...

javascriptphpajax

Optimizing the management of data retrieved from the backend in React

My web application follows this flow: When on the Investments screen, an API request is made to a server, returning an array of investment objects that are then displayed as a list. Clicking on an item redirects the user to the Investment Details screen, ...

javascriptnode.jsreactjs

How can one effectively manage irregularly nested object/arrays within a Meteor framework?

Having difficulty finding a smart and effective method to manage nested arrays/objects with varying dimensions in nodeJS. These irregular arrays/objects can have 1, 2, 3, or more dimensions. For instance, consider these 2 different scenarios : Scenario 1 ...

javascriptarraysnode.jsmeteornested

Center the span element within Bootstrap 5 button groups

I am experiencing an issue where the span elements in my button groups are not aligning properly. I am looking for a way to align these span elements within the button groups without using fixed widths. Creating a basic web modal with Bootstrap 5 <di ...

cssbootstrap-5

Working with Ember.js to manage relationships using a select element (dropdown) for create/edit operations

I'm trying to establish a relationship through a dropdown in my Ember application. Here is my Books model: import DS from 'ember-data'; export default DS.Model.extend({ // Relationships author: DS.belongsTo('author'), name ...

javascripthtmlember.jshandlebars.js

While utilizing the json_encode() function, Ajax encountered a 500 Internal Server Error

My attempt to implement a basic Ajax request using JS and PHP did not go as planned. Here is the code I used: test.js $(document).ready(function () { $.ajax({ url: window.location.href + 'test.php', type: 'GET', ...

phpjqueryjsonajax

How can you ensure a cohesive visual style throughout various Razor and HTML views?

In my ASP.Net MVC 5 application, I have a Layout.cshtml and HTML view page included. However, I want to maintain a consistent look and feel across multiple views in the application. I am aware that this can be achieved by using a Razor view page with the f ...

htmlangularjsrazor

How to detect internet connection in any screen using React Native?

I'm facing confusion regarding how to display my customDialog when there is no Internet connection in my app. Currently, I have successfully shown my customDialog only in the LoginScreen. However, I want to display it from different screens, not just ...

javascriptandroidiosreactjsreact-native

The AJAX continues to detect issues without any error messages appearing on the screen

I've been developing a chrome extension that currently focuses on verifying the existence of a user. Within the plugin popup, there's a form where users can input their username and password, which is then sent to the server. Although the user ...

jqueryajaxdjango

What happens when an AJAX request is aborted in jQuery - does it trigger the done or fail

I am struggling to grasp the concepts of $.ajax, .done, and .fail. When I initiate my ajax call, I store it in a variable. During the next ajax call, I check if the variable is defined and then use abort. I'm unsure whether .abort() triggers .done ...

jqueryajax

The component is being updated, however the conditional statement is not functioning as expected

Having encountered an unexpected behavior in my react code, I'm seeking guidance as I am still fairly new to using react. Over the past few days, I successfully built a dashboard and now wish to implement a data page that includes CRUD transactions. ...

javascriptreactjs

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

javascriptnode.jscypress

React allows the button to be activated only when all input fields are completed

I'm new to both React and JavaScript, so my question is: How can I directly access these two objects? I attempted using Object.keys without any luck. const [inputList, setInputList] = useState([{action: "", dest: "", }]); const ...

javascriptreactjsarraysobjectreact-hooks

What could be causing the "no such file" error to occur while attempting to use the "mammoth" tool to convert a basic .docx file?

Here is my code snippet. The file contains a basic "hello world" and I have the hello.docx file located in the same directory where I am running this mammoth function. Error message: fatal Error: ENOENT: no such file or directory, open './hello.docx& ...

javascriptnode.jsmammoth

Struggling with Bootstrap 4 modal functionality on mobile devices? Unable to close the modal or see its contents properly?

Attempting to incorporate the Bootstrap 4 modal into a block results in an incorrect display. The modal appears in a "fade in" mode and becomes unresponsive, making it impossible to close the modal without refreshing the browser. <div class="modal fade ...

jquerycssbootstrap-4

What is the best way to display a progress bar as a percentage?

Is there a way to visually represent the progress of an upload on the screen using percentages? I want to display a bar that starts at 0% and updates with the percentage from the percentComplete variable. Once the upload is finished, I'd like to show ...

javascriptjqueryajaxcoldfusionprogress-bar

"Getting Started with Redux/React - Implement logic to add a new item if it doesn't already

I'm attempting to insert a single item into my nested Redux state, but only if it does not already exist in the list. I'm specifically looking for a solution using Redux, as I want that added flavor to my code. Here is how my state is structure ...

javascriptreactjsreduxreact-redux

Implementing CSS transitions across several elements simultaneously can enhance the user experience

There seems to be an issue with animating two elements simultaneously using max-height. The transition always occurs one after the other, with one element completing its transition before the other starts. setTimeout(function () { $(".b").css( ...

javascripthtmlcss

Notifying with Jquery Alert after looping through routes using foreach loop

I am trying to create a jQuery alert message that displays after clicking on a dynamically generated button in the view using a foreach loop. The issue I am facing is that only the first button in the loop triggers the alert, while the subsequent buttons ...

javascriptphpjquery