How to Change Eye Icon for Show or Hide in Password Field

Introduction

BuddyBoss uses the default WordPress eye icon for showing or hiding passwords on the Login and Registration pages. You can change these icons by adding a small custom function to your active theme and some CSS. This ensures that the password visibility toggle matches your site’s branding or design style. This guide explains how to change eye icon for show or hide in password field.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

1. Navigate to Appearance > Theme Editor in your WordPress admin dashboard.
2. Under Select theme to edit, choose your active theme (preferably BuddyBoss Child Theme), then click Select.
3. From the Theme Files list, open Theme Functions (functions.php).
4. Add the following code just before the closing PHP tag (?>):

add_action( 'login_enqueue_scripts', 'bbTheme_loginStyle' ); 

function bbTheme_loginStyle() { 

    $styles = '<style>

        body.login .user-pass-wrap .wp-pwd .dashicons-visibility:before { content: "ee6a"; }

        body.login .user-pass-wrap .wp-pwd .dashicons-hidden:before { content: "ee69"; }

    </style>'; 

    echo $styles; 

}

5. Add the following CSS in Appearance > Customize > Additional CSS:

.user-pass-wrap .wp-pwd .dashicons-visibility:before { content: "ee6a"; }

.user-pass-wrap .wp-pwd .dashicons-hidden:before { content: "ee69"; }

6. Click Update File to save the changes.

Note: You can change the Unicode characters to any icon of your choice. Check the BuddyBoss Font Cheatsheet for available icons.

Troubleshooting and FAQs

Q: The eye icon did not change.
A: Clear your browser cache and refresh the login or registration page.

Q: Can I use a different icon?
A: Yes. Replace the Unicode ee6a and ee69 with your preferred icon from the Font Cheatsheet.