Having trouble changing the Font Awesome icon on click?

Question

Having trouble changing the Font Awesome icon on click?

I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue?

(HTML)

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

(CSS)

.toggle-icon {
    cursor: pointer;
}

(Javascript)

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

Any assistance or guidance would be highly appreciated!

javascript html css font-awesome

Answer 1

Answer №1

The issue lies in attempting to select the html element .change-icon with $('change-icon') instead of $('.change-icon'), where the dot indicates that it is a class.

Replace this:

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

With this:

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

Also, consider changing $('i') to $('#password-see')

Answer 2

The issue lies in attempting to select the html element .change-icon with $('change-icon') instead of $('.change-icon'), where the dot indicates that it is a class.

Replace this:

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

With this:

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

Also, consider changing $('i') to $('#password-see')

Answer 3

Answer №2

Give this a shot

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

Answer 4

Give this a shot

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

Answer 5

Answer №3

Give this a shot man

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

Answer 6

Give this a shot man

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

Having trouble changing the Font Awesome icon on click?

Answer №1

Answer №2

Answer №3

Similar questions

Adding a background image to a box in MUI is a simple task that can enhance

Check if the provided user email is already in use using the express validator

Font reference in IE and Chrome causing HTTPS to fail

Utilize JQuery scripting to input Checkbox values

Focusing on a specific image using Jquery

Having trouble retrieving data from the database when passing input to a mongoose query using an href tag in Node.js

Navigate through photos (jQuery) to adjust size and location dynamically (CSS)

Error in public build of Gatsby & Contentful site due to incorrect file paths

Display temporary image until real image loads within ng-repeat angularjs

How to Create a React Material UI Switch with Minimal Padding

Is the background image on my class website too large?

The useRouter() function doesn't seem to be successfully navigating to the main landing page

Obtain the IDs of the previous and next list items if they exist?

Implementing user-driven filtering in a React table

Creating a function within document.ready using jQuery is a common practice for ensuring that

Convert the assignment of a.x=3 to the setter method a->setX(3) using the provided script

Tap on the HTML5 video to exit the fullscreen mode

Is there a way to verify the file extension in a multi-input form during an upload process?

The server has sent cookies headers, however, the browser did not store the cookies

Using jQuery and AJAX to dynamically add data to POST parameters