programmer138200 programmer138200 - 17 days ago 6
CSS Question

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

Answer

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