CODEWITHSUNDEEP
csstwitter-bootstrap
hmahdavi
hmahdavi

Reputation: 2354

How to insert space between text and icon in bootstrap?

I use of bootstrap in my website .When I add glyphicon glyphicon-user class to the a tags icons appear with out any space .Please advice

<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام" class="glyphicon glyphicon-user" rel="nofollow" >ثبت‌نام</a>

enter image description here

Upvotes: 5

Views: 29329

Answers (3)

user3590235
user3590235

Reputation: 183

Assuming the text is to the left, how about adding style="padding-left:10px" to your span?

<p>Envelope icon as a link:
    <a href="#">
      <span style="padding-left:10px" class="glyphicon glyphicon-envelope"></span>
    </a>
  </p>

Upvotes: 2

John Louie Dela Cruz
John Louie Dela Cruz

Reputation: 669

Put &nbsp; between the text and icon.

Example:

<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام"  rel="nofollow" >
    ثبت‌نام &nbsp; <span class="glyphicon glyphicon-user"></span>
</a>

A whitespace will do also

<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام"  rel="nofollow" >
    ثبت‌نام <span class="glyphicon glyphicon-user"></span>
</a>

EDIT:

As your comment below that you can't add additional tags inside the a tag, you can actually add an &nbsp; or a whitespace but using your code, the icon is placed on the left not on the right as the image shows.

Using your code add an &nbsp; or a whitespace before the text but the icon is on the left.

<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام" class="glyphicon glyphicon-user" rel="nofollow" >&nbsp;ثبت‌نام</a>

Upvotes: 12

Tarun Dugar
Tarun Dugar

Reputation: 8971

Add two spans inside the anchor tag, one for holding your text, and one for the glyphicon:

<a>
    <span class="glyphicon glyphicon-user" style="margin-right: 10px"></span>
    <span>your text</span>
</a>

Upvotes: 0

Related Questions