How to stop Bootstrap Badge stripping whitespace

Question

I am using AngularJS and bootstrap badges with some embedded glyphicons to display some category information.

When I include the glyphicon in the badge, the text lies a little too close to the glyphicon for my liking.

I have created an Angular JS function to append this white space to the badge text like so:

$scope.getWhiteSpace = function() {
  return "    " + $scope.category;
}

However, when I try to include whitespace/blankspace (or whatever the correct term is...) in front of the text, the badge seems to automatically strip it. I need to do it using an angular function because I want to be able to decide if I want the whitespace or not, dependent on whether there is a glyphicon present in the badge.

The only way i've been able to get the effect I want is to include   in the html like so:

<span class="badge">

    <span class="glyphicon glyphicon-plus-sign"></span>

    &nbsp;&nbsp;&nbsp;&nbsp;{{category}}

</span>

What is the correct way to do this using a function? Or is there a simple CSS fix? [I have dabbled unsuccessfully - I am new to this stuff....]

Here is a plnkr which shows what is happening: http://plnkr.co/edit/bCIA8Lw9x2bWzIA55GIP

Answer 1

It is pretty basic issue. You can give margin-right to resolve this issue.

You can do it either ways

1) Using inline styling style="margin-right:10px;" to the glyphicon. Example

2) Give the same styling to [some class] and add the same class to the glyphicon

Answer 2

use this in css :

 .glyphicon-plus-sign:before {
      margin-right: 10px;
    }

It already available in this link

Answer 3

If you want to do it using   you can do it like this:

<span ng-bind-html="getWhiteSpace()"></span>

And in JS:

 $scope.getWhiteSpace = function() {
  return "   " + $scope.category;
};