css - bootstrap - glyphicon pdf

Glyphicons renderizando como caja vacía

Question

Estoy usando la excelente biblioteca de inicio de Twitter con Glyphicons, sin embargo, todos los iconos se muestran como cuadrados vacíos, como por ejemplo:

He cargado las fuentes Glyphicons en mi raíz web y he cambiado el archivo bootstrap.css para que apunten a sus ubicaciones correctas, que he verificado porque tienen 200 OK solicitudes de 200 OK en las herramientas de desarrollo de Chrome:

Este es el marcado que estoy usando:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

¿Alguna idea de por qué la fuente se puede representar como cuadros vacíos? Las respuestas anteriores en StackOverflow apuntan a rutas incorrectas a las fuentes, lo cual no es el caso aquí ya que las rutas son correctas.

Answer 1

¡Estaba teniendo el mismo problema y pude resolverlo!

• En IIS, establezco los tipos Mime para woff y woff2 de la siguiente manera:

  .woff application/x-font-woff
  .woff2 application/font-woff2

• En el CSS de mi página, creé una fuente cargada desde la descarga de Glyphicon de arranque para woff y woff2:

  @font-face {
    font-family: ''Glyphs'';
    src:  url(''/bootstrap/fonts/glyphicons-halflings-regular.woff2'') format(''woff2''),
          url(''/bootstrap/fonts/glyphicons-halflings-regular.woff'') format(''woff'');
  }

• En el CSS, creé una clase para glyphicons y especifiqué para usar la fuente anterior que titulé "Glifos":

  .glyphicon {
      font-family: ''Glyphs'', sans-serif;
  }

• En cualquier lugar donde quisiera mostrar un glyphicon, especifiqué por la clase de glyphicon y luego la clase de glyphicon, que normalmente es bootstrap:

  <span class=''glyphicon glyphicon-home''></span>

Answer 2

A continuación css stanza define la familia de fuentes para Glyphicons Halflings // inside bootstrap.css

@font-face {
    font-family: "Glyphicons Halflings";
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), 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");
}

Si está utilizando CDN ... los archivos EOT AND woof requeridos están disponibles en la ruta relativa de la URL de CDN ... es decir, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.eot https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular .woff2 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.ttf https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

Entonces, si desea utilizar Glyphicons con el archivo bootstrap.css en su máquina local ... descargue todos esos archivos desde el enlace anterior y colóquelos en la misma ruta relativa ... es decir, ../fonts/

y prueba ahora ...

Nota: No conozco la licencia para esos archivos (lea algunos documentos para uso comercial). Puede que haya algún enlace gratuito proporcionado por bootstrap para descargar estos archivos ...

Answer 3

Coloque la carpeta de fuentes en su directorio css
Debería ir como

css/fonts/**.svg
css/fonts/**.woff

Answer 4

Copie la carpeta "fuentes" del paquete bootstrap en su servidor. Y tu estas listo.

Answer 5

Esto también puede suceder si no ha especificado ambas clases (es decir, solo "glyphicon-star" en lugar de "glyphicon-glyphicon-star")

Bueno:

<i class="glyphicon glyphicon-star">

Malo

<i class="glyphicon">

Answer 6

Hice algunas comparaciones y resulta que el archivo bootstrap.css contenía esto:

url(''../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular'')

mientras que debería leer:

url(''../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular'')

Observe que he agregado un guión bajo que ahora coincide con el ID declarado dentro de <font id="..."> en el archivo .svg.

Answer 7

No es realmente una solución, pero acabé usando el CDN de Bootstrap: http://www.bootstrapcdn.com/

Answer 8

Para aquellos que han intentado todo antes y todavía no funcionaron, cambié

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: ''Glyphicons Halflings'';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a

.glyphicon:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: ''Glyphicons Halflings'';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

en el archivo bootstrap.css

Answer 9

Para mí, este marcado es el que funciona ... solo las definiciones de clase de icono que son diferentes:

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>

Answer 10

Para mí, noté que en la versión sass, _glyphicons.scss la sección:

@at-root {
  // Import the fonts
  @font-face {
    font-family: ''Glyphicons Halflings'';
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.eot''), ''#{$icon-font-path}#{$icon-font-name}.eot''));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.eot?#iefix''), ''#{$icon-font-path}#{$icon-font-name}.eot #iefix'')) format(''embedded-opentype''),
         url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.woff2''), ''#{$icon-font-path}#{$icon-font-name}.woff2'')) format(''woff2''),
         url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.woff''), ''#{$icon-font-path}#{$icon-font-name}.woff'')) format(''woff''),
         url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.ttf''), ''#{$icon-font-path}#{$icon-font-name}.ttf'')) format(''truetype''),
         url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}''), ''#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'')) format(''svg'');
  }
}

Tuvo que ser reemplazado con lo que solía ser:

// Import the fonts
@font-face {
  font-family: ''Glyphicons Halflings'';
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.eot''), ''#{$icon-font-path}#{$icon-font-name}.eot''));
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.eot?#iefix''), ''#{$icon-font-path}#{$icon-font-name}.eot?#iefix'')) format(''embedded-opentype''),
       url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.woff''), ''#{$icon-font-path}#{$icon-font-name}.woff'')) format(''woff''),
       url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.ttf''), ''#{$icon-font-path}#{$icon-font-name}.ttf'')) format(''truetype''),
       url(if($bootstrap-sass-asset-helper, twbs-font-path(''#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}''), ''#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'')) format(''svg'');
}

Answer 11

Según el equipo de Glyphicons, este es un error en WebKit:

WebKit CSS contenido Unicode error?

Pero no entiendo por qué una versión anterior de Chrome renderiza esto. He publicado aquí las versiones, pero un moderador eliminó mi respuesta.

Answer 12

Tuve el mismo problema. En mi caso fue el tipo mime, pero no lo sé antes porque mi iis no me permitió agregar por ui cuando muestro:

Mi iis ui

No pensé que los tipos de mimo así lo intentaron otras soluciones. Horas más tarde volvemos a mirar sobre los tipos de mimos.

Usé muchas soluciones como, edite my web.config más de 30 veces con:

<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
        <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

Se modificó el código, se probaron, se agregaron características en iis, se cambió la ruta, después de todos los intentos, siempre en el cuadrado, nada funcionó.

Entonces, en un foro de lectura sobre cómo agregar tipos de mimes a iis con la consola, intenté agregar algo así como dijeron.

Abrí un cmd como administrador y envié un mensaje de texto:

C:/Windows/System32/inetsrv>appcmd.exe set config /section:staticContent
/+"[fileExtension='' .ttf '',mimeType='' application/x-font-truetype '']"

Dónde:

"C:/Windows/System32/inetsrv" es la carpeta raíz de iss.

Y:

appcmd.exe set config /section:staticContent /+"[fileExtension='' .ttf '',mimeType='' application/x-font-truetype '']" Es la línea de comandos para configurar ese mime en appcmd, como sabes, iis.

Result:

Y et voilà! ese trabajo.

Espero que esto pueda ayudar a alguien. Podría ser útil para mí.