使用简单表单时在输入字段中添加字体真棒图标

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

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

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

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

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
}

你应该很高兴。无论表单处于何种状态，图标都将始终保持在您放置它的位置。