Skip to content
Related Articles
Open in App
Not now

Related Articles

How to change the color of an icon using jQuery ?

Improve Article
Save Article
  • Last Updated : 18 Oct, 2021
Improve Article
Save Article

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.



Return value: It will return the value of the property for the selected element. 



<!DOCTYPE html>
        How to change the color of the icon using jQuery?
    <script src=
    <link rel="stylesheet" 
        .btn {
            background-color: blue;
            border: none;
            color: white;
            padding: 16px 16px;
            font-size: 100px;
            border-radius: 5px;
        #append {
            padding: 5px 15px;
    <!-- Script to add div element 
         in the HTML document -->
        $(document).ready(function () {
            $("button").click(function () {
                    backgroundColor: "green",
                    color: "yellow"
        <h1 style="color: green;">
            How to change the color of the icon using jQuery?
        <button class="btn">
            <i class="fa fa-home"></i>
        <button id="append">
            Change Icon Color


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!