html - glyphicon - iconos bootstrap

Marcador de posición en blanco para bootstrap glyphicon

Question

Tengo una tabla con la ordenación de glyphicons bootstrap en el encabezado. El icono solo se muestra si la tabla está siendo ordenada por ese encabezado particular. Cuando hago clic en la celda, cambia el tamaño de la tabla. La tabla es dinámica, así que prefiero no arreglar los tamaños de celda. ¿Hay alguna forma de colocar un marcador de posición que ocupe el lugar del glyphicon?

Sé cómo el javascript funcionará para ocultarlo, pero no sé cómo hacer el css para darle un tamaño al span.

(esto es bootstrap 3.0 btw) ...

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

Es el icono particular. Chrome dice que tiene 16px de ancho cuando se muestra.

El proyecto actual es un poco más complicado, aquí hay un plunkr:

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

Answer 1

Lo que me ayudó fue establecer el estilo de la tabla en style="table-layout: fixed" . Después de esto, los anchos de columna de mi tabla permanecieron iguales, ya sea que se muestre un icono junto al encabezado de la columna o no.

Aquí está el código de la tabla:

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

La función order() establece el orderType y voltea orderReverse . Con la ayuda de ng-show , se muestra una flecha en el encabezado solo si la tabla está ordenada por esa columna. No hay necesidad de un glyphicon invisible ni nada de eso.

Answer 2

No creo que haya un carácter de espacio en blanco en la fuente de glyphicon .

¿Por qué no usas un color de fuente transparente?

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

El / 2122 es un signo menos. Úsalo como un icono normal:

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

Answer 3

Solo oculta el elemento del icono con visibility: hidden; . P.ej

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

Answer 4

Tenía el mismo problema, pero también estaba usando angularJs. He hecho lo siguiente para resolver el problema.

agregar nueva clase a css

.glyphicon-hide {
    color: transparent;
}

Luego en plantilla puedo usar

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