Ndtyjky

I am having something like this:

How do I expand the width that the border it will also cover the icon on the left like this:

My HTML:

.input-group-text {

  width: 48px;

  border-right: none;

  background-color: #ffffff;

}

[class^="fa-"], [class*=" fa-"] {

  display: inline-block;

  width: 100%;

}

.LoginInput {

  border-left: none;

  position: relative;

}

<b-input-group>

  <b-input-group-prepend>

    <span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>

  </b-input-group-prepend>

  <b-form-input class="LoginInput" size="lg" placeholder="Username">

  </b-form-input>

</b-input-group>



<b-input-group>

  <b-input-group-prepend>

    <span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>

  </b-input-group-prepend>

    <b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">

    </b-form-input>

</b-input-group>

I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.

HTML

<div class="search">

  <span class="fa fa-search"></span>

  <input placeholder="Search term">

</div>

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css");

  body { margin: 30px; }



.search {

  position: relative;

  color: #aaa;

  font-size: 16px;

 }



.search input {

  width: 250px;

  height: 32px;

  background: #fcfcfc;

  border: 1px solid #aaa;

  border-radius: 5px;

  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;

}



.search input { text-indent: 32px;}

.search .fa-search { 

  position: absolute;

  top: 10px;

  left: 10px;

}

Find the full thread here.

I hope this is of some help.