Adding font-awesome icon inside a input field when using simple-form

jcc Published at Dev

403

JCC

I looked and used the solution for placing the font-awesome icons inside an input field box as outlined here.

HTML

<input name="txtName" id="txtName">
<span class="fa fa-user errspan"></span>

CSS

.errspan {
   float: right;
   margin-right: 6px;
   margin-top: -60px;
   position: relative;
   z-index: 2;
   color: gray;
}

But it doesn't really work with simple-form as when you place the icon using css positioning, the icon would be in the wrong place when simple-form shows error messages below the fields themselves.

So for example, if you position the icon to work in one state where it looks great when the error message is displayed like this.

It ends up being incorrect in another state, like this.

JCC

The solution turns out to be pretty simple and straight forward.

Move the icon html to be ahead of the input html like this.

HTML

<span class="fa fa-user errspan"></span>
<input name="txtName" id="txtName">

Then just adjust the CSS positioning so that it fits with this new convention.

CSS

.errspan {    
  float: right
  top: 24px
  right: 6px
  position: relative
  z-index: 2
  color: grey
}

You should be good to go. The icon will always stay exactly where you placed it no matter what the state the form is in.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-25

Comments

0 comments

From Java

Related Related

Article

Adding font-awesome icon inside a input field when using simple-form

Adding font-awesome icon inside a input field when using simple-form

Font Awesome icon inside text input element

Changing Font Icon in WPF using Font Awesome

Change color when hover a font awesome icon?

Overlapping a font awesome icon inside a text field

Include font awesome inside input type text

Right border of div being cut off when using float:right with font awesome icon

Change the font path when using Font Awesome

change font-awesome icon when toggled

Font awesome icon and text in input submit button?

How to add Font Awesome icon into <input> button?

How to insert font awesome icon into text input?

Using Font Awesome as Select Icon

Make Font Awesome icon a submit for a form

Adding font awesome icon inline yet superscript with other element

Font awesome icon font as a placeholder in input after adding class with jquery

Font Awesome icon inside of HTML input with Angular working

How do I add a Font Awesome icon to file input field

Vertically centering Font Awesome icon inside nav

using font awesome on input field button text

Font awesome not loading when using Python simple http server

Changing Font Icon in WPF using Font Awesome

Change the font path when using Font Awesome

change font-awesome icon when toggled

Icon inside simple form

Using Font Awesome as Select Icon

When appending a font awesome icon in a button using jQuery the icon disappears when I click another button

Vertically centering Font Awesome icon inside nav

To create a grid using font awesome icon

font-awesome icon not displaying inside the textarea