CODEWITHSUNDEEP
htmllaravellaravel-4iconslaravel-blade
baao
baao

Reputation: 73241

Icon in input field Laravel 4 / Blade

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?

Upvotes: 0

Views: 2463

Answers (2)

baao
baao

Reputation: 73241

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!

Upvotes: 1

iori
iori

Reputation: 3506

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. :)

Upvotes: 0

Related Questions