Embedded Icon in Bootstrap 3 Input

icons.html

<!-- 
See http://codepen.io/lightstrike/pen/tswme for demo
Example markup and inspiration from http://jsfiddle.net/KyleMit/cyCFS/
-->

<p>Full Size:</p>
<div class="left-inner-addon ">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text"
           class="form-control" 
           placeholder="Username" />
</div>
<div class="right-inner-addon ">
    <i class="glyphicon glyphicon-search"></i>
    <input type="search"
           class="form-control" 
           placeholder="Search" />
</div>


<br/>

<p>Smaller:</p>
<div class="col-xs-6" >
    <div class="left-inner-addon">
        <i class="glyphicon glyphicon-user"></i>
        <input type="text"
               class="form-control" 
               placeholder="Username" />
    </div>
</div>
<div class="col-xs-6" >
    <div class="right-inner-addon">
        <i class="glyphicon glyphicon-search"></i>
        <input type="search"
               class="form-control" 
               placeholder="Search" />
    </div>
</div>

input_addon.scss

/* Inspiration from http://jsfiddle.net/KyleMit/cyCFS/ */

@mixin inputAddon($position, $padding:9px, $iconAttr:"i", $inputAttr:"input") {
    position: relative;

    #{$iconAttr} {
        position: absolute;
        #{$position}: 0;
        padding: $padding;
        pointer-events: none;
    }   

    #{$inputAttr} {
        width: 100%;
        padding-#{$position}: 30px;    
    }   
}
      
.left-inner-addon {
    @include inputAddon("left");
}

.right-inner-addon {
    @include inputAddon("right");
}