CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
Zyoo
Zyoo

Reputation: 773

Font Awesome unexpected bottom margin

Ok I've got headache at this point and this thing irritates me. (Hours wasted for this)

For some reason, font awesome icon has bottom margin while bootstrap's glyph seems fine.

Please check http://jsfiddle.net/damjd2sj/

<body>
<div class="container">
    <form>
            <div class="form-group">
                <label for="disabledTextInput">Disabled input</label>
                <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
            </div>
            <div class="form-group">
                <label for="disabledSelect">Disabled select menu</label>
                <select id="disabledSelect" class="form-control">
                    <option>Disabled select</option>
                </select>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess2">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess2">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                <span class="fa fa-camera-retro form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Can't check this
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
<!-- /container -->

Upvotes: 0

Views: 237

Answers (1)

m4n0
m4n0

Reputation: 32275

Set line-height for the form input

.form-control-feedback.fa {
 color: #3c763d;
 line-height: 34px;
}

JSFiddle

The problem was that the .fa line-height: 1 was overriding default .form-control-feedback line-height: 34px

Upvotes: 3

Related Questions