Open In App

How to change the color of an icon using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
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=
    </script>
    <link rel="stylesheet" 
          href=
    <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:



Last Updated : 18 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads