Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to change the color of an icon using jQuery ?

  • Last Updated : 18 Oct, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!