How to decrease spacing between bootstrap glyphicons


Tags: html,css,twitter-bootstrap

Problem :

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;
}


Solution :

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 -->


    CSS Howto..

    How to transform:scale the top and bottom part of a div using CSS

    How to use bootstrap css tables to display data from MySQL tables?

    How to vertically align text in my columns? [closed]

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How to define changing css property based on incrementing class names?

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to change logo in php header when change the header js class and CSS

    HTML/CSS How to have to tags on same line?

    How to show divs inline. css html

    How to stop css class on textbox

    How to keep an element fixed top within another element?

    How to place output from an external php file to a specific place on the page

    How can I hide a button when scrolled to the top of a page?

    How to create this layout using CSS

    How would you design the css and html to divide up this rounded widget?

    How to make div expandable with content while setting min height property as well in CSS

    How to make custom shape div, or manipulate divs

    How to reuse CSS selector?

    How can I prevent a form-control from taking a new line in Bootstrap

    How do you make a nav bar “sticky”?

    How to stop main scrollbar working when popup modal is activated, which needs also a scrollbar

    How to use :before for the third
  • element?
  • How can I make my form field have a background image?

    How to add an orange background to top of page

    How to add box-shadow to a CSS div with display:table-row? [duplicate]

    How to validate HTML/CSS running in localhost?

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    How to change the css style for phone and desktop?

    How to fill the width under an image with a caption without defining the width of the caption?