输入字段中的图标Laravel 4 / Blade

Question

我正在尝试将一个图标放入刀片中的输入字段，看起来像这样

但不要成功。我已经处理过将一个图标添加到一个按钮：

{{ HTML::decode(Form::button('<i class="glyphicon glyphicon-check"></i> Send', array('class' => 'btn'))) }}

这是我将其添加到输入中的方式：

{{ HTML::decode(Form::text('From','<i class="glyphicon glyphicon-check"></i> '.Input::get('from'),array('class' => 'myclass', 'id' => 'fromform'))) }}

给出这个输出：

不是我们想要的......

我试图在标签和输入中添加图标，但没有任何效果。有人有想法吗？

Answer 1

感谢@Razor我终于开始工作了，尽管这可能是一种解决方法：

像这样设置一个宏：

  {{ Form::macro('myField', function($name, $value = null, $id = null, $class){        
     return '<div class="inner-addon left-addon">
             <i class="glyphicon '.$class.'"></i>
             <input type="text" name="'.$name.'" class="myclass" id="'.$id.'" value="'.$value.'"  />
             </div>';
     }); 
  }}

调用输入：

 {{ Form::myField('From',Input::get('from'),'fromform', 'glyphicon-check') }}

---

我从这个answer中取出了css：

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

如果有人知道另一种方法来实现它，我很高兴听到！

Answer 2

HTML /刀片

 <label class="block clearfix">
 <span class="block input-icon input-icon-right">
 <input class="form-control" placeholder="Username" name="username" type="text" value="">
 <i class="ace-icon fa fa-user"></i>
 </span>
 </label>

样品

希望这有帮助。 ：）