Blank placeholder for bootstrap glyphicon

I have a table with sorting bootstrap glyphicons in the header. The icon is only shown if the table is being sorted by that particular header. When I click the cell, it changes the sizing of the table. The table is dynamic, so I'd prefer not fixing the cell sizes. Is there a way I can put a placeholder in there that takes the place of the glyphicon?

I know how the javascript will work to hide it, I just don't know how to do the css to give the span some size.

(this is bootstrap 3.0 btw)...

<span class="glyphicon glyphicon-arrow-down"><span>

is the particular icon. Chrome says that it's 16px wide when displayed.

The actual project is a little more complicated, here's a plunkr:

http://plnkr.co/edit/N6nkW3e4gDdpQdtRC8ue?p=preview

Solution 1:

I don't think there's a whitespace character in the glyphicon font.

Why don't you just use a transparent font color?

.glyphicon-none:before {
    content: "\2122";
    color: transparent !important;
}

The \2122 is a minus sign. Use it like a normal icon:

<i class="glyphicon glyphicon-none"></i>

Solution 2:

Just hide the icon's element with visibility: hidden;. E.g.

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>