How to Add Font Awesome Icons in JetFormBuilder (Step-by-Step Guide 2025)

JetFormBuilder is powerful, but adding icons makes it even better. In this guide, I’ll show you how to add Font Awesome icons and a password toggle in JetForm Builder with just one code block. Want to make your forms look more modern and user-friendly? Adding icons inside input fields is a simple way to do it. Think about the small user icon in an email field or the eye icon that lets users show or hide their password. These little touches improve both the look and the usability of your forms. In this blog, I’ll walk you through how to add Font Awesome icons to your JetForm Builder fields, including a password visibility toggle.

Why Add Icons to Form Fields in JetFormBuilder?

Better user experience: Icons give quick visual cues. For example, a user icon before an email field instantly signals what kind of input is expected.
Improved accessibility: Not everyone reads labels first; some people scan for visual hints.
Modern design: Adding icons makes your forms look sleek and professional.
Extra functionality: The eye icon for password fields adds a toggle feature, reducing frustration when typing passwords.

Add the Code

All you need is a single block of code inside your theme’s functions.php file (or a custom plugin if you prefer).

				
					function enqueue_icons_script_and_styles() {
    // Enqueue the Font Awesome stylesheet for the icons
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
    
    // Add inline styles
    $custom_css = "
        .input-icon {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2em;
            z-index: 2;
        }

    ";
    wp_add_inline_style('font-awesome', $custom_css);
}
add_action('wp_enqueue_scripts', 'enqueue_icons_script_and_styles');

function add_icons_to_input_fields() {
    ?&gt;
    
        jQuery(document).ready(function($) {
            // Append the eye icon to the password field
            var passField = $('input[name="YOUR FIELD NAME"]');
            passField.closest('.jet-form-builder__field-wrap').css('position', 'relative');
            passField.after('<i class="fas fa-eye-slash input-icon password-eye"></i>');

            // Append the user icon to the epost field
            var emailField = $('input[name="YOUR FIELD NAME"]');
            emailField.closest('.jet-form-builder__field-wrap').css('position', 'relative');
            emailField.before('<i class="fas fa-user input-icon email-icon"></i>'); // Changed to 'fas' for the free version

            // Toggle the password visibility
            $('.password-eye').on('click', function() {
                if (passField.attr('type') === 'password') {
                    passField.attr('type', 'text');
                    $(this).removeClass('fa-eye-slash').addClass('fa-eye');
                } else {
                    passField.attr('type', 'password');
                    $(this).removeClass('fa-eye').addClass('fa-eye-slash');
                }
            });
        });
    
    &lt;?php
}
add_action(&#039;wp_footer&#039;, &#039;add_icons_to_input_fields&#039;);

This snippet will load the Font Awesome library, position the icons properly, and then attach the user icon to your email field and the toggle eye icon to your password field.

Replace Field Names

Inside the code, look for the placeholders like YOUR FIELD NAME and replace them with the actual names of your JetForm Builder fields. For example, change it to passwordor email depending on what your form uses.

Test It Out

After saving the changes, refresh your form page. You should now see:

A user icon before the email input.
An eye icon inside the password field.
The password toggle working when you click the icon.

Final Thoughts

With one block of code, you’ve upgraded your JetForm Builder form to be more stylish and functional. Icons not only make forms visually appealing but also improve usability and accessibility for your visitors. Whether it’s a login form, registration form, or checkout form, this little trick will help your forms stand out and give users a smoother experience.

For More : Visit

Faqs

Can I use Font Awesome icons in JetForm Builder for free?

Yes! Font Awesome offers a free version with plenty of icons, including the user and eye icons used in this guide. You only need the paid version if you want access to premium icons.

Will this code work with any WordPress form plugin?

The example here is specific to JetForm Builder, but the same method can be adapted to most WordPress form plugins by targeting their input field names.

How do I find the correct field names in JetForm Builder?

You can inspect your form using the browser’s developer tools (right-click → Inspect). Look for the name attribute of the input field, such as email or password, and replace it in the code.

Can I add other icons apart from user and password toggle?

Yes, you can add any Font Awesome icon you like. Just replace the icon class (for example, fa-user or fa-eye) with another icon from the Font Awesome library .

Will this affect my website’s speed?

No, loading Font Awesome through a CDN (like in this guide) is lightweight and won’t slow down your site significantly. If you already use Font Awesome elsewhere, the icons will load from cache.