使用简单形式时，在输入字段中添加font-awesome图标

Question

我查看并使用了解决方案，将字体很棒的图标放在输入字段框中，如此处所示。

StackOverflow answer

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;
}

但它并不适用于简单形式，因为当您使用css定位放置图标时，当简单形式在字段本身下方显示错误消息时，图标将位于错误的位置。

因此，例如，如果您将图标定位为在一个状态下工作，当错误消息显示为这样时，该图标看起来很棒。

最终在另一个状态下不正确，就像这样。

Answer 1

解决方案非常简单直接。

将图标html移动到输入html的前面。

<强> HTML

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

然后调整CSS定位，使其符合这个新惯例。

<强> CSS

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

你应该好好去。无论表格处于何种状态，图标都将始终保持在您放置的位置。