Add Icons to JetFormBuilder Fields: Font Awesome, SVG, Password Eye

How the CSS works

• The selectors match inputs by their name attribute, so only the fields you list get an icon. Other forms on the page are not affected unless they use the same field names.
• The icons are small SVGs embedded as data URIs. In them, %3C and %3E stand for < and >, and %23 stands for #. The browser loads nothing extra.
• padding-inline-start pushes the typed text and the placeholder past the icon. It adds padding on the left in left-to-right languages and on the right in RTL languages.
• The RTL rule moves the background image to the right side when the page has dir="rtl", which WordPress sets for RTL languages.
• The password field keeps its icon at the start of the input, so it stays clear of JetFormBuilder's built-in eye.

Test it

1. Reload the form page with a hard refresh, and clear any page cache or CSS optimization plugin cache.
2. Check that each field shows its icon and that typed text starts after it.
3. Type a password and click the eye. It should still toggle, with only one eye visible.
4. If your site has an RTL language, switch to it and confirm the icon moves to the right.

Customize the icons

• Color: change %236b7280 in each stroke attribute to another hex color, keeping %23 in place of #. For example, use %230d9488 for teal.
• Size: change background-size and increase padding-inline-start to match.
• Other icons: replace the SVG markup inside url("…") with any SVG icon. Encode <, > and # as shown above, use single quotes inside the SVG, and check the icon's license before you use it.
• More fields: copy a block, change the name value and add the new selector to the first two rule groups.

Using Font Awesome icons instead

If your site already uses Font Awesome, you can show its icons next to fields instead of SVG backgrounds. Keep two things in mind:

• Font Awesome must be loaded on the form page, for example through the official Font Awesome plugin or a Kit. JetFormBuilder doesn't load it for you. Font Awesome's class names and font names change between major versions, so copy the icon markup from the version you actually load.
• An input can't hold an icon font glyph, but its wrapper can. JetFormBuilder wraps every Text Field input in a div with the class jet-form-builder__field-wrap, so you can draw the glyph on that wrapper's ::before.

Copy the Unicode value and font family from the Font Awesome version you load. This example uses Font Awesome 6 Free. If you also use the SVG snippet above, delete its rule for the same field so it doesn't show two icons:

.jet-form-builder__field-wrap:has(> input[name="user_email"]) {
  position: relative;
}
.jet-form-builder__field-wrap:has(> input[name="user_email"])::before {
  content: "\f0e0"; /* envelope; user is \f007, lock is \f023 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}
.jet-form-builder__field-wrap > input[name="user_email"] {
  padding-inline-start: 42px;
}

This works with Font Awesome's web font (CSS) version. The SVG + JavaScript version only draws icons in ::before when its pseudo-elements option is turned on. If you would rather output an <i> element, the PHP actions jet-form-builder/before-field and jet-form-builder/after-field (since 3.3.4) run inside that wrapper and pass one argument, the field's render object.

For most login and registration forms, the SVG method above is simpler. It has no extra font request, no version clashes and no PHP. If you do add PHP for the hooks, put it in a child theme's functions.php or a small custom plugin, never in the parent theme's functions.php, where it is lost on the next theme update.

Troubleshooting

• No icon appears. The Field Name in your CSS doesn't match the input's name attribute, or a cache is serving old CSS. Inspect the input, fix the selector and clear all caches.
• The icon appears, then disappears. Your theme may set the background shorthand on inputs with a more specific selector, which wipes out the image. Make your selector more specific, for example by adding a class from your page wrapper. Use !important on background-image only as a last resort.
• Text or placeholder overlaps the icon. The theme's padding wins over yours. Increase padding-inline-start or make the selector more specific.
• Two eye icons on the password field. A custom JavaScript toggle, or another plugin, is running alongside JetFormBuilder's built-in eye. Remove the custom one.
• No eye option in the panel. Your JetFormBuilder is older than 3.3.4, or Field Type isn't set to password. Update the plugin and check Field Type.
• Font Awesome shows empty squares or nothing. Font Awesome isn't loading on that page, or two different versions are loaded at once. This often happens when a theme, a page builder and a plugin each load their own copy. Load a single copy and use class names from that version.
• Icon on the wrong side in RTL. Make sure the RTL rule from the snippet is included and that the page's <html> tag has dir="rtl".

For more JetFormBuilder field polish, see how to add a phone field with a country flag and auto-detect and how to style JetFormBuilder file upload fields.

That's the whole setup: the built-in eye for passwords and one CSS block for field icons, with no extra scripts. If you'd rather have someone build or style your JetFormBuilder login or registration form for you, post a request on BoostMyCroco.