Пустое местозаполнитель для бутстрап-глификона

У меня есть таблица с сортировкой бутстрапов глификонов в заголовке. Значок отображается только в том случае, если таблица сортируется по этому конкретному заголовку. Когда я нажимаю на ячейку, она меняет размер таблицы. Таблица динамична, поэтому я бы предпочел не фиксировать размеры ячеек. Есть ли способ разместить там местозаполнитель, который заменит глификон?

Я знаю, как javascript будет работать, чтобы скрыть его, я просто не знаю, как сделать css, чтобы присвоить размер некоторого размера.

(это bootstrap 3.0 btw)...

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

- это конкретный значок. Chrome говорит, что при отображении он имеет ширину 16 пикселей.

Фактический проект немного сложнее, здесь plunkr:

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

Ответы

Ответ 1

Я не думаю, что там есть символ пробела в шрифте глификона.

Почему бы вам просто не использовать прозрачный цвет шрифта?

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

Знак\2122 - знак минус. Используйте его как обычный значок:

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

Ответ 2

Спрячьте элемент значка с помощью visibility: hidden;. Например.

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

Ответ 3

Имел ту же проблему, но также использовал angularJs. Для решения проблемы я сделал следующее.

добавить новый класс в css

.glyphicon-hide {
    color: transparent;
}

Затем в шаблоне я могу использовать

<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>

Ответ 4

Что помогло мне установить стиль таблицы style="table-layout: fixed". После этого ширина столбцов моей таблицы осталась прежней, независимо от того, был ли значок показан рядом с заголовком столбца или нет.

Вот код таблицы:

<table class="table table-hover" style="table-layout: fixed;">
<thead>
  <tr>
    <th ng-click="order('col1')">
      Column Header 1
      <span class="glyphicon" ng-show="orderType == 'col1'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
    <th ng-click="order('col2')">
      Column Header 2
      <span class="glyphicon" ng-show="orderType == 'col2'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
  </tr>
</thead>
<tbody>
  ...
</tbody>
</table>

Функция order() устанавливает orderType и переворачивает orderReverse. С помощью ng-show стрелка отображается в заголовке только в том случае, если таблица сортируется по этому столбцу. Нет необходимости в невидимом глификоне или что-то в этом роде.