使用简单形式时在输入字段内添加超赞字体图标

Question

我查看并使用了将超赞字体图标放置在此处概述的输入字段框中的解决方案。

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

你应该可以开始了。无论表单处于何种状态，该图标将始终准确保留在您放置它的位置。

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