How to change the color of an icon using jQuery ? Last Updated : 18 Oct, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to change the color of the icon using jQuery. To change the color of the icon, we will use a jquery method. jQuery css() method this method is used to change the styling of a particular selector. This method is also can be used for changing the color of the icon. First, we will create an icon element using font awesome icon and add some styles on it using CSS property. We have added an HTML button and when the button is clicked, the css() method is called and added some color and background color on the icon element. Syntax: $(selector).css(property) Return value: It will return the value of the property for the selected element. Example: HTML <!DOCTYPE html> <html> <head> <title> How to change the color of the icon using jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .btn { background-color: blue; border: none; color: white; padding: 16px 16px; font-size: 100px; border-radius: 5px; } #append { padding: 5px 15px; } </style> <!-- Script to add div element in the HTML document --> <script> $(document).ready(function () { $("button").click(function () { $(".btn").css({ backgroundColor: "green", color: "yellow" }); }); }); </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> How to change the color of the icon using jQuery? </h3> <button class="btn"> <i class="fa fa-home"></i> </button> <br><br> <button id="append"> Change Icon Color </button> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article How to change the color of an icon using jQuery ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to change the color of any div that is animated using jQuery ? In this article, we will learn to change the color of any HTML div that is animated using jQuery.We will be using the jQuery .animate() method to change the background colors of any element. The jQuery .animate() method is used to create smooth animations by changing the CSS properties of elements o 2 min read How to create a Home icon using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Home icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hr 1 min read How to create a Grid icon using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Grid icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hr 1 min read How to create a Star icon using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Star icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hr 1 min read How to create an Alert icon using jQuery Mobile? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making an Alert icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†1 min read Like