Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Spacing between the glyphicon and text?

I am trying to add a glyph icon as part of an email address link. The icon shows but there is no spacing between the icon and the email address text (I want the hyperlink to include both the icon and the text... including the space). What's the best way to accomplish this?

       <a href="mailto:someone@somewheredotcom" title="Some Email">
        <span class="glyphicon glyphicon-envelope">someone@somewheredotcom</span>
    </a> 
like image 389
user2162381 Avatar asked May 17 '15 18:05

user2162381


2 Answers

You can try to do this:

.glyphicon-envelope:before {
  margin-right: 5px;
}

Be aware that your custom css file should be included after bootstrap.css

like image 186
Bogdan Nechyporenko Avatar answered Nov 12 '22 12:11

Bogdan Nechyporenko


If you using only glyphicon just add one space after </span> tag like below

<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Individual</a>

If you using glyphicon along with font awesome library reference just add fa-fw at the end of class.

<a href="mailto:someone@somewheredotcom" title="Some Email">
    <span class="glyphicon glyphicon-envelope fa-fw">someone@somewheredotcom</span>
</a> 
like image 8
AirCode One Avatar answered Nov 12 '22 11:11

AirCode One