Praneeth A Praneeth A - 4 months ago 22
CSS Question

How to decrease spacing between bootstrap glyphicons

I have two glyphicons that I want to be right next to each other, but they have some space in between them, and I can't seem to get rid of it.

Here is how it looks:

enter image description here

Here is my code:

<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->


css:

.glyphicon {
font-size: 25px;
vertical-align: middle;
}
#authForm {
display:inline-block;
width:150px;
}

Answer

Decrease or remove the width from #authForm.

.glyphicon {
    font-size: 25px;
    vertical-align: middle;
}
#authForm {
    display:inline-block;
    width:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="authForm">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        <label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
    </div> <!-- end form-group -->
    <div class="form-group" id="authForm">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        <label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
    </div> <!-- end form-group -->

Comments