css - bootstrap - glyphicon pdf

Centro de contenido de glifos

Question

Utilizo Google Chrome Inspector y, si selecciona el pseudo anterior de la glifonía, verá que hay un espacio vacío a la derecha. ¿Cómo puedo centrar el glyphicon?

Intenté ajustar la alineación del texto pero no funciona.

<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>

jsFiddle

Enlace actualizado jsFiddle 2

Answer 1

Como usted puede ver claramente que es un problema si el autor agrega algunos espacios en blanco, la única razón por la que se soluciona esto es mediante la configuración manual del ancho.

Answer 2

Creo que el problema de raíz aquí es con los SVG con los que se construyó la fuente del icono. He creado fuentes de íconos anteriormente desde SVG y vi este mismo comportamiento. Si el símbolo no estuviera centrado en su viewbox SVG, obtendría un glifo que estaba fuera del centro, como ha observado.

El desarrollo de una solución basada en código se volvería súper desordenado, ya que tendría que tener en cuenta cada glifo que no está centrado, y luego las compensaciones tendrían que ser relativas al tamaño del icono para que las compensaciones se ajusten a la font-size del icono. Ciertamente es factible, pero parece ser el tipo de cosa que sería un dolor de cabeza mantener.

Yo recomendaría uno de los siguientes:

• Acepte el conjunto de glyphicon por lo que es (una fuente de icono gratuita) y viva con sus imperfecciones
• Busque otra fuente de icono que no tenga este mismo problema: esté dispuesto a pagar por una licencia
• Cree su propia fuente de icono para que pueda asegurarse de que todos los glifos estén centrados

Answer 3

Hola almis

.glyphicon {
      font-size: 120px;
      display: block;
      text-align: center;
    }

Simplemente reemplace la clase .glyphicon con el código css anterior.

Disfrutar..

Answer 4

La razón por la que no se puede solucionar de otra manera que no sea un hackeo es porque el glifón en sí no está centrado dentro de su propio contenedor, lo que significa que cuando se diseñó en su matriz no estaba completamente centrado.

Tendrá que "hackearlo" con los shivs indicados anteriormente (espacio entre letras, margen negativo, etc.) pero depende de la resolución.

Sin embargo, para centrarlo VERTICALMENTE puede quitar el relleno y usar la altura de la línea igual a la altura de su contenedor

Answer 5

Normalmente uso el ancho máximo (y el ancho, si quiero que todos los íconos de una lista tengan el mismo tamaño) para tratar estos problemas.

Según su jsFiddle:

max-width:222px;

Ver here

Answer 6

Puede deshacerse del espacio vacío a la derecha del glifo jugando con el atributo de letter-spacing :

.glyphicon {
    font-size: 120px;
    letter-spacing: -9px;
}

Answer 7

Simplemente agregue la clase my-style-icon al icono y agregue esto a su CSS:

.my-style-icon {
    font-size: 120px;
    display: block;
    text-align:center;
}

Answer 8

Use font-awesome, su ''+'' está perfectamente centrado, sin problemas de kerning. Y use display: flex en padre, en combinación con margen: auto en niño (es decir, icono). Resulta en una alineación perfecta. Aquí está el jsfiddle ( http://jsfiddle.net/Rpad/sps01dsd/13/ )

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

HTML:
<div class="container">
    <div class="row">
        <div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
            <i class="fa fa-plus"></i>
        </div>
    </div>
</div>
CSS:
.fa-plus {
    margin: auto;
    font-size: 10em;
}
#add {
    border: 5px dashed black;
    border-radius: 25px;
    display: flex;
}

Answer 9

letter spacing para el pseudo elemento y funcionó. Intenté cambiar el font-size y veo que no aparece el espacio en blanco.

.glyphicon:before{
   letter-spacing: -0.085em;
 }

Fiddle de trabajo: http://jsfiddle.net/MasoomS/1z79r22y/

Answer 10

vertical-align: middle; margin: 0 auto; Debería hacer el truco por ti.

Answer 11

Almis Hola allí. Su código de demostración solo está utilizando el span contiene el glifón en el que no tiene Ancho para centrar.

Tan pronto como hagas algo como esto se centrará.

<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>

Aquí hay un Fiddle .