Icon in input field Laravel 4 / Blade

Question

I'm trying to put an icon into my input fields in blade, to look like this

enter image description here

But don't succeed. I've handled to put an icon to a button:

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

This is how I added it to the input:

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

Gives this output:

enter image description here

Not what we are looking for...

I've tried to add the icon in the labels and inputs, but nothing worked. Anyone an idea?

The code works excellent on a button, but I want the icon in an input, there it isn't working. One second, I'll edit — baao, Nov 26 '14 at 00:35
take a look at this [solution](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) — Razor, Nov 26 '14 at 01:36
Thanks, @Razor I know it's no problem with pure HTML, but need a solution for blade — baao, Nov 26 '14 at 01:38
I will create a [macro](http://laravel.com/docs/4.2/html#custom-macros) in this case. — Razor, Nov 26 '14 at 01:52

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Thanks to @Razor I finally got it working, even though this might be a workaround:

Setting a macro like this:

  {{ 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>';
     }); 
  }}

Call the input:

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

and I took the css out of this answer:

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

If someone knows another way to achieve it, I'm happy to hear!

score 0 · Answer 2 · answered Nov 26 '14 at 02:01

HTML/Blade

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

Sample enter image description here

Hope this help. :)

Icon in input field Laravel 4 / Blade

2 Answers2