Font Awesome icon inside text input element

html

responsive-design

pseudo-elements

accessibility

byAlex Kataev·Sep 20, 2024

Here's a fast-forward method to embed a Font Awesome icon directly inside an input field. You aim to take control over the icon positioning via absolute positioning in a relative container:

<div style="position: relative;">
  <input type="text" style="padding-left: 30px;">
  <i class="fa fa-user" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%);"></i>
</div>

Adjust padding-left of the input field to give your icon some elbow room, and use transform CSS property to center-align the icon. Further handy positioning tweaks are elaborated below.

Non-interactive icons: using background images

Got statuary admiration for non-interactive icons? Use them as background images. Specify the icon in your CSS stylesheet using the background property like a boss:

.input-with-icon {
  background: url('path/to/font-awesome-icon.png') no-repeat;
  background-position: 5px center;     /* Positioning icon like a boss */
  padding-left: 30px;                  /* Give text some personal space */
}

This "unobtrusive" method lends that static icon its "no touchy" mode, ensuring it doesn't rudely interfere with text input. Well,

Placeholders: the new home for icons

Got errands for your placeholders? Add your icon in them using a pseudo-element. Hey presto, you've got a clean minimalist interface! How about that!

input[placeholder]:before {
  content: '\f007';  /* FontAwesome user icon Code */
  font-family: 'FontAwesome';
  position: absolute;
  margin-right: 5px;
}

This style adds a touch of finesse to the user interface while scoring high on the functionality department.

Accessibility and usability: the silent heroes

Let's not play blind to accessibility and usability when sprucing up inputs with icons:

Go keyboard-friendly with interactive icons, drawing focus to the input field on icon click.
If you think icons are for "ears" not "eyes", use ARIA attributes to convey the decorative role of icons.
Keep HTML as tidy as your scoop of pearls - uphold semantic HTML by adding a <label> tag for context.

Best practices and optimizations

Font Awesome: the magic wand

Double-check that Font Awesome's CSS has the complete GPS coordinates in your HTML.
If icons decide to play hide-n-seek, call them back with an @font-face rule pointing to your Font Awesome font files.
FontAwesome's cheatsheet is like your programmer's grimoire - just cast the font-family: 'FontAwesome'; where necessary.

Optimizing icon layout: the chess game

King your game with a wrapping <span> or <div>, setting position: relative; for the absolute positioned knight (icon).
Icons love taking the central podium, give them a raise with top: 50%; and transform: translateY(-50%); for exact vertical centering.
Keep HTML and CSS code as clean as a razor-shaved head. Go for a lean setup with pseudo-elements or background images.

User interactions: their minute of fame

Make your icons work by encouraging user engagement with clickable icons. Let the icon trigger focus on the input field.
Watch out for a cramp, give your icon and text some padding.
Set the stage with the right z-index layering to avoid any offbeat stacking orders.