Bootstrap 3 Placing Icon inside input field

Question

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.

My html looks like this:

<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>

I have tried position: absolute like this:

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

But when I do it will look great in one spot, but will not be positioned correctly in another instance.

I have also tried to see if I could use text-indent to see if this would work throughout, but it had the same effect.

.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}

Here's a jsFiddle that might help

Solution 1

You can use input-group add-on with a input-group-btn.

<div class="col-md-12">
    <div class='input-group add-on col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker" 
               data-date-format="yyyy-mm-dd"/>
        <div class="input-group-btn">
            <button class="btn btn-default">
                <i class="fa fa-calendar"></i>
            </button>
        </div>
    </div>
</div>

With a little CSS to hide the button border:

/* remove border between controls */
.add-on .input-group-btn > .btn {
    border-left-width: 0;
    left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    -webkit-box-shadow: none; 
            box-shadow: none;
    border-color:#cccccc; 
}

Demo: http://bootply.com/128059

Solution 2

Using bootstrap's native validation states is probably preferable to writing custom CSS here.
^{And I'm pretty sure that I'm the one who came up with the CSS in question.}

Just use .has-feedback on your form-group and .form-control-feedback on your icon:

<div class="form-group has-feedback">
    <label class="control-label sr-only">DatePicker</label>
    <input type="text" class="form-control date-picker" /> 
    <i class="fa fa-calendar form-control-feedback"></i>
</div>

Demo in jsFiddle

Solution 3

Check this fiddle, adapted from this answer

The difference being that in your case the <i> was placed after <input>. Swapping them makes it work. That's why the positioning was creating a mess as opposed to the cited answer.

Comments

[zazvorniki]

Thank you! I was able to do this with bootstrap3, but no matter how hard I looked I could not figure it out with bootstrap3. Thank you so much for your help!

[zazvorniki]

I have gone over this code extensively. I originally had the i before the input and that was when I started having problems with it. The problem is the position absolute, some places it will appear fine, but as soon as I move this to another location the positioning messes up and I really don't want to reposition it every time I want to include a calendar. The above solution worked perfectly and no positioning was necessary.

[KyleMit]

skelly, I originally went with an input group with the the inner borders removed as well. However, as you know, this makes focus effects tricky, or in your case, non-existant. I think validation states offers a better UI. See my answer below.

[KyleMit]

@zazvorniki, No need for a downvote here buddy. You can use the classes provided by the validation states to provide visual feedback on your input control about the purpose of that control. It doesn't necessarily have to be about validation per se. It's just a feedback mechanism. And it does so out of the box without having to write custom css. I don't get what your negative reaction here is? You asked about how to position an icon inside of an input box. Does this answer not accomplish that?

[KyleMit]

@zazvorniki, ok, well I posted this answer 20 hours ago. You commented 10 minutes ago at 18:32:56, and I got a downvote 5 seconds later at 18:33:01, so I just assumed.

[zazvorniki]

I did not down vote, I don't believe in the down vote button unless it's just a remarkably awful answer. I guess what I should have said here is that while the validation method is a way to accomplish this, other people including myself may not want what comes with the validation states. For example I was working with a calender here, it would be odd if only one field had the states and the others did not. Also, I never quite understood answering a question that already had a solution and was posted months ago...

[zazvorniki]

You know what they say about people who assume... :)

[FrenkyB]

I was looking how to place icon inside input element. This answer is great, thanks a lot.