CODEWITHSUNDEEP
javascripthtmlcssfont-awesome
SeventhWarhawk
SeventhWarhawk

Reputation: 1323

Can't change Font Awesome icon on click?

I am trying to change a font awesome icon using a toggle, however, nothing seems to be working and i am not sure why?

(HTML)

<span class="change-icon"><i class="far fa-eye" id="password-see"></i></span></div>

(CSS)

.change-icon {
    cursor: pointer;
}

(Javascript)

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

Any help would be greatly appreciated!

Upvotes: 0

Views: 1409

Answers (3)

LorenzoOtto
LorenzoOtto

Reputation: 110

Your problem is that you try to get the html element .change-icon but you try to get it with $('change-icon') instead of $('.change-icon') where the dot is representing that it is a class

Change this:

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

To this:

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

And i would change $('i') to $('#password-see')

Upvotes: 3

Ozgur Sar
Ozgur Sar

Reputation: 2204

Try this

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

Upvotes: 1

Abdelrhman Gemi
Abdelrhman Gemi

Reputation: 171

Try this bro

 $(document).ready(function () {
        $('.change-icon').click(function (event) {
            $(event).find('i').toggleClass('far fa-eye far fa-eye-slash');
        });
    });

Upvotes: 0

Related Questions