Blank placeholder for bootstrap glyphicon

Question

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

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