input-group-addon class is not present in Bootstrap 4?

Question

I have been using this code in Boostrap 4 beta and everything was ok.

<label for="username" th:text="#{login.user">User</label>
<div class="input-group">
    <span class="input-group-addon"><i class="icon-user"></i></span> <input
        type="text" id="username" name="username" class="form-control"
        placeholder="Usuario" th:placeholder="#{login.user}"
        th:required="true" />
</div>

Now, I've updated my Bootstrap 4 to current v4.0.0., but with that, the code is not working. The input-group-addon class is not present in the Bootstrap css file.

If I add this to my css style file everything works ok:

.input-group-addon {
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

Am I'm doing somenthing wrong? Thanks

Answer 1

It looks like you need mandatory wrap icon with <span class="input-group-text"><i class="icon-user"></i></span> to display it correctly

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="icon-user"></i></span>
        <input ...>
    </div>
</div>

Here is a link to official Bootstrap 4 migration guide for Input Groups were they say that

We’ve dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in .input-group-text.