Spacing between the glyphicon and text?
Solution 1
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
Solution 2
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>
Solution 3
From http://getbootstrap.com/components/, see this note
Be sure to leave a space between the icon and text for proper padding.
So, you can modify the CSS if desired, for example using Bogdan's idea, or just by adding
between the icon and your text:
<a href="mailto:someone@somewheredotcom" title="Some Email">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> someone@somewheredotcom
</a>
Solution 4
According to Bootstrap:
Icon classes should only be used on elements that contain no text content and >have no child elements.
You should put the email address outside of span:
<span class="glyphicon glyphicon-envelope fa-fw"></span>someone@somewheredotcom
user2162381
Updated on July 06, 2022Comments
-
user2162381 almost 2 years
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>
-
Aditya Mittal over 8 yearsThis worked for me. Thanks. I did:
.glyphicon:before { margin-right: 5px; }
-
SvenAelterman almost 8 yearsWhat you're saying is true, but it will not add the spacing like the OP was looking for.