css - popper - twitter-bootstrap-rails en Heroku: glifos desplegados como cuadrados

popper rails

Question

Implementé una aplicación de rieles en Heroku, y estoy usando la gema twitter-bootstrap-rails para incluir Twitter bootstrap. Todo funciona perfectamente a nivel local (y en el entorno de desarrollo), pero en Heroku (y en producción) todo funciona bien, excepto por los glificones, que se muestran como pequeños cuadrados.

Al principio pensé que esto era un problema con los íconos de iconos no precompilados, así que en mi gemfile, moví la línea ''gem twitter-bootstrap-rails'' del grupo de activos, y estaba seguro de precompilar todos mis activos antes de subirlos a Heroku.

Sin embargo, esto no resolvió el problema. Después de inspeccionar la página, parece como si los iconos estuvieran disponibles, pero la propiedad CSS que los vincula está siendo sobrescrita por otra regla CSS que establece background-image en none. Parece estar sucediendo en una hoja de estilo que es parte de Twitter bootstrap, por lo que no estoy seguro de por qué está sucediendo esto.

¿Alguien mas ha tenido este problema?

Answer 1

Realice estos cambios en su archivo bootstrap.css:

en algún lugar alrededor de la línea 1174:

-  background-image: url("../img/glyphicons-halflings.png");
+  background-image: image-url("glyphicons-halflings.png");

y en algún lugar alrededor de la línea 1183:

-  background-image: url("../img/glyphicons-halflings-white.png");
+  background-image: image-url("glyphicons-halflings-white.png");

Creo que eso hará el truco.

Answer 2

Arreglado. El CSS que estaba causando el problema:

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

fue parte de Fontawesome, que está incluido por defecto en twitter-bootstrap-rails. El problema era que los archivos del icono de Fontawesome no se estaban precompilando, porque son tipos de archivo inusuales. Ingresé al archivo de entorno production.rb y agregué '' .woff'', '' .eot'', '' .svg'', '' .ttf'' a la lista config.assets.precompile. Luego volví a compilar mis activos y aparecieron los íconos. Auge.

Answer 3

Resolví este problema agregando a config/environments/production.rb :

config.assets.precompile += %w( ''.woff'', ''.eot'', ''.svg'', ''.ttf'' )

También tengo la siguiente cadena en Gemfile , sin la ruta github :

gem ''twitter-bootstrap-rails''

Con esta configuración, los Glificones se muestran bien en Heroku.