Spacing between the glyphicon and text?

email spacing glyph
user2162381 picture user2162381 · May 17, 2015 · Viewed 18.1k times · Source

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>

Answer

AirCodeOne picture AirCodeOne · Feb 29, 2016

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>

Related questions

Outlook 2016 adds space between table rows. HTML email dev, can't find a fix that works

Outlook 2016 is adding space between table rows in HTML email. I can't find a fix that works. Blue section on top should be one bar, not have the white gaps. Gray section on bottom should also be one footer section, …

Read More
How to validate an email address in JavaScript

Is there a regular expression to validate an email address in JavaScript?

Read More
How to validate an email address using a regular expression?

Over the years I have slowly developed a regular expression that validates MOST email addresses correctly, assuming they don't use an IP address as the server part. I use it in several PHP programs, and it works most of the …

Read More