instalar - Ruby on Rails Bootstrap Glyphicons no funciona

rails 5 bootstrap sass

Question

He agregado bootstrap a mi sitio. Aquí está la estructura que estoy usando. (No puedo quitar el archivo bootstrap.css ya que lo modifiqué a mi gusto).

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

Todo se importa correctamente, pero el problema es que los glificones no funcionan y los necesito.

Answer 1

Aparentemente Chrome se ha roto durante meses con respecto a este problema.

Esto funcionó para mí cuando lo puse en la parte superior de mi archivo customization_css.css.scss

@import ''bootstrap-sprockets'';
@import ''bootstrap'';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Answer 2

Asegúrate de haber establecido

# config/environments/production.rb
config.assets.compile = true

Y agrega fuentes a la lista de precompilación

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Answer 3

Creo que puede tener un problema con la cartera de activos

Desea cambiar bootstrap.css a bootstrap.css.scss y luego reemplazar donde usa

@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'');
}

con font-path (mira la sección 2.3.2 - CSS y Sass)

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

También en su config/environments/production.rb

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

En su config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join(''app'', ''assets'', ''fonts'')

Vea otra publicación SO para un problema similar

Espero que esto ayude

Answer 4

Cuando uso bootstrap en mis aplicaciones de rieles utilizo la gema bootstrap-sass.

https://github.com/thomas-mcdonald/bootstrap-sass

Puedes anularlo. Simplemente impórtelo tal como lo explican los documentos. Luego, importe o pegue sus archivos modificados.

En un proyecto de php, el glifo no funcionaba, descargué el archivo zip de arranque clásico y extraje los archivos de glifos para reemplazarlos en el proyecto. En mis recuerdos, el error aparece cuando genera un estilo de arranque personalizado desde su sitio (el origen del error puede ser incorrecto).

¡Espero que esto ayude!

Answer 5

En Rails 4, con sass, Bootstrap 3.2.0 y el uso de la gema bootstrap-sass:

@import "bootstrap";
@import "bootstrap/theme";

Answer 6

En mi archivo index.html.slim, reemplacé span.glyphicon.glyphicon-calendar con span.fa.fa-calendar y funcionó.

Answer 7

En mi caso, utilicé este <i class="icon-plus"></i> , que tomé del sitio oficial de Bootstrap y no vi nada. Pero, en cambio, es necesario usar este <i class="glyphicon glyphicon-plus"></i>

Answer 8

Intenté con la solución sugerida y no funcionó, esta es una solución genérica que te ayuda a solucionar cualquier problema relacionado con esto que puedas tener.

Aquí está la definición de la cara de la fuente resultante con bootstrap-sass:

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

Answer 9

Los íconos de Bootstrap 3 se ven así:

<i class="glyphicon glyphicon-indent-right"></i>

mientras que Bootstrap 2 se veía así:

<i class="icon-indent-right"></i>

Si el código que está utilizando no está actualizado (verifique si hay una b3 branch), entonces tendrá que bifurcar y cambiar los nombres de los íconos usted mismo.

Answer 10

Noviembre de 2015 EDITAR: Recomendaría esta joya: https://github.com/twbs/bootstrap-sass La comunidad Bootstrap la mantiene activamente y funciona muy bien con Ruby on Rails.

¡Estaba teniendo un problema muy similar a ti pero lo resuelvo! Encuentre esta parte en su archivo bootstrap.css:

@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'');
}

y reemplace ../fonts/ con /assets . Así es como se verá el código final.

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

Espero que esto haya ayudado!

Answer 11

Puede copiar todos los archivos de fuente bootstrap a public / fonts y funcionará. No es necesario realizar importaciones o cambios en la aplicación.rb.

Answer 12

Según Bootstrap 3, los Glyphicons no funcionan , hay un error con el personalizador de Bootstrap que estropea las fuentes de glyphicon. Tuve el mismo problema, pero pude solucionarlo descargando todo el bootstrap de http://getbootstrap.com/ y luego copiando los archivos de fuentes en la ubicación correcta.

Answer 13

Si está utilizando bootstrap-sass y tiene este problema, intente importar bootstrap como este en uno de sus archivos scss. Si usa sass, simplemente convierta la sintaxis:

@import "bootstrap-sprockets";
@import "bootstrap";

Answer 14

También estaba luchando para hacer que el boostrap3 glyphicon funcionara en rieles 4. Lo resolví añadiendo

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

al archivo application.css.scss y

config.assets.paths << "#{Rails}/vendor/assets/fonts"

al archivo application.rb.

Answer 15

También puedes probar esto:

@font-face {
  font-family: ''Glyphicons Halflings'';

  src: url(''<%= asset_path("glyphicons-halflings-regular.eot") %>'');
  src: url(''<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>'') format(''embedded-opentype''), url(''<%= asset_path("glyphicons-halflings-regular.woff2") %>'') format(''woff2''), url(''<%= asset_path("glyphicons-halflings-regular.woff") %>'') format(''woff''), url(''<%= asset_path("glyphicons-halflings-regular.ttf") %>'') format(''truetype''), url(''<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>'') format(''svg'');
}

Solo necesita convertir su archivo your_css.css a your_css.css.erb

Answer 16

Para mí, como usuario de twitter-bootstrap-rails :

Gracias a la publicación de take @ GitHub

Agregando esto:

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

a mi application.css corrigió el problema.

Espero ser útil.