Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Iconos bootstrap 3

11 de abril de 2014

Buenas tardes, ojalá me puedan ayudar.

Yo monté Bootstrap 3 sobre sails js (un framework para trabajar Node.Js). El problema es que no me funcionan los iconos he intentado algo como:

<span class="glyphicon glyphicon-align-right"></span></pre>
También he intentado algo como <i class="icon-pencil"></i> pero tampoco me funciona. Se ve un cuadrito pequeño sin la imagen :(

Gracias por la atención.


Respuestas

#1

Bootstrap usa fuentes para los iconos, verifica que las hayas descaragado y estén el directorio correcto.

@ramiroanacona

13 abril 2014, 6:55
#2

Si te fijas en el código CSS de Bootstrap, verás lo siguiente relacionado con los iconos:

@font-face {
  font-family: 'Glyphicons Halflings';
 
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Como puedes ver, Bootstrap 3 espera que la fuente que contiene los iconos se encuentre en un directorio llamado fonts/ que está por encima del directorio donde se encuentra el CSS. En otras palabras, la estructura de directorios tiene que ser algo como lo siguiente:

<directorio-raíz>/
├─ css/
|  └─ bootstrap.css
└─ fonts/
   ├─ glyphicons-halflings-regular.eot
   ├─ glyphicons-halflings-regular.woff
   ├─ glyphicons-halflings-regular.ttf
   └─ glyphicons-halflings-regular.svg

@javiereguiluz

14 abril 2014, 19:47