ruby on rails 4 - not - Bootstrap 3+Rails 4-Ciertos glifos no funcionan

rails add bootstrap 4

Question

Estoy tratando de usar bootstrap 3 en mi aplicación Rails 4. Seguí this tutorial para configurar el programa de arranque 3 usando bootstrap saas desde this página github.

Bootstrap funciona bien, pero los glyphicons no funcionan como se esperaba.

Ciertos glifos no se muestran en absoluto. Por ejemplo, me cansé de mostrar algunos de ellos para probarlos en mi application.html.erb:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span> 

Los íconos se muestran así

El ícono del disquete no se representa (muestra un carácter no válido) Los signos más y menos no son negritas y son mucho más pequeños que los que se muestran en el sitio web de bootstap.

También estoy viendo los siguientes mensajes en la consola de rieles.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.svg"):

Realmente agradecería sus aportes sobre este tema.

¡Gracias!

Answer 1

Actualiza esto Estaba teniendo el mismo problema y seguí los pasos proporcionados por la respuesta número 1 de Oddurs. Eso no funcionó para mí por alguna razón. Y luego me di cuenta de que tenía que ver con la estructura de archivos en mi carpeta pública (no estoy seguro de por qué la mía era diferente).

Básicamente conseguí que funcionara agregando "/ bootstrap" después de "/ assets" ya que todos mis glyphicons estaban en una carpeta "/ bootstrap", creo por defecto

Entonces en vez de esto:

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

Hice esto:

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

en la aplicación.css. Espero que eso ayude a alguien

Answer 2

Agregando lo siguiente a application.scss funcionó para mí en Rails 5 (después de descomentar @import "bootstrap/glyphicons"; del mismo archivo [usando la gema de los orats ])

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

Answer 3

Asegúrese de que su gemfile esté actualizado y de que el vendor/cache esté libre de gemfile .

Mi problema se debió a versiones extrañas de gemas, así que ejecuté la bundle update que actualizó el cache .

Updating files in vendor/cache
Removing outdated .gem files from vendor/cache
  * bullet-4.14.9.gem
  * bootstrap-sass-3.3.5.gem
  * pry-0.10.2.gem
  * webmock-1.21.0.gem
  * sprockets-2.12.4.gem
  * minitest-reporters-1.1.3.gem
  * sass-3.2.19.gem
  * coffee-rails-4.0.1.gem
  * hashie-3.4.2.gem
  * newrelic_rpm-3.13.2.302.gem
  * nprogress-rails-0.1.6.7.gem
  * schema_plus_pg_indexes-0.1.7.gem
  * hike-1.2.3.gem
  * minitest-5.8.1.gem
  * tilt-1.4.1.gem
  * sass-rails-4.0.5.gem
Bundle updated!

Una vez que hice eso, por si fuera poco, creo que otros cachés también rake assets:clobber y compiló nuevamente los activos RAILS_ENV=production rake assets:precompile .

Luego reinicié nginx ../bin/restart y magic ... aparecieron los glyphicons en lugar de algo extraño en Firefox en el escritorio y una cámara en el iPad. Todo en lugar del hombre glyphicon.

Answer 4

Estaba teniendo el mismo problema. Resuelto agregando:

@import "bootstrap-sprockets";

sobre la línea existente:

@import ''bootstrap'';

en mi archivo /app/stylesheets/bootstrap_and_customisation.css.scss

Answer 5

Estaba teniendo problemas para ver:

<span class="glyphicon glyphicon-edit"></span>

en mi entorno de desarrollo. El siguiente ajuste funcionó.

En su archivo css.scss, agregue:

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

Answer 6

Estoy usando la gema angular-ui-bootstrap-rails

gema ''angular-ui-bootstrap-rails''

Descargué el programa de bootstrap y pegué la carpeta de fuentes en la carpeta de la aplicación / activos

A continuación, reinicie el servidor de rieles.

Answer 7

Estoy usando twitter-bootstrap-rails, y el mensaje de error es / assets / twitter / fonts / ...

La razón es que la gema twitter-bootstrap-rails no incluye los recursos de Glyphicons en su directorio de proveedores. He intentado todas las soluciones anteriores, pero ninguna de ellas funcionó.

La solución final para mí es descargar el archivo comprimido del sitio oficial de arranque, descomprimirlo, mover los archivos faltantes al directorio public / assets / twitter / fonts. Funciona para mi entorno de desarrollo.

Answer 8

Otra solución sería copiar la carpeta de fuentes en público para que tenga

public/fonts/glylpicons-.....

Las mismas soluciones funcionarían para font-awesome, etc. El único inconveniente de esto es si cambia sus archivos de fuentes a menudo: o)

Answer 9

Para mí, esto era un problema con la incompatibilidad de versiones entre bootstrap-sass y sass.

Si inspecciona su application.css generado verá que @ font-face está encerrado dentro de @ at-root, que es una nueva declaración sass no admitida por la versión de sass que estaba usando.

Actualicé sass-rails a 5.0.3 y sass a 3.4.16 y funcionó (sass debe ser al menos 3.3).

Answer 10

Puedes copiar todos los archivos de fuentes de bootstrap a public / fonts y funcionará

Answer 11

Se encontró con los mismos problemas al actualizar a Rails 4.1.4, bootstrap-sass 3.2.0.

Buenos consejos por encima, pero ninguno me solucionó el problema.

Estos pasos funcionaron:

1. Copie los archivos de fuentes a RAILS_ROOT / vendor / assets / fonts / bootstrap / (probablemente necesite crear el directorio)

2. Agregar esto a config / application.rb

   config.assets.paths += %W("#{Rails.root}/vendor/assets/fonts")

No necesitaba directivas especiales ni redefiniciones de variables sass.

Answer 12

Si está utilizando bootstrap-sass-official, agregue esto antes de importar bootstrap:

$icon-font-path: ''bootstrap-sass-official/assets/fonts/bootstrap/'';

Answer 13

Si estás cansado de la magia de bootstrap-sass o twitter-bootstrap-rails, o si quieres quedarte con una versión específica de bootstrap, aquí hay algo manual que puedes hacer:

• Descargue el programa de arranque de http://getbootstrap.com/ , coloque los archivos dentro de su #{Rails.root}/vendor/assets/javascripts

• En la aplicación de archivo / assets / javascripts / application.js , escriba //= require ''bootstrap-3.3.6-dist/js/bootstrap.min''

• En la aplicación de archivo / assets / stylesheets / application.css , escribe *= require ''bootstrap-3.3.6-dist/css/bootstrap.min''

• Coloque un script como este en su {Rails.root} / bin y configúrelo para que sea ejecutado por capistrano cuando implemente en producción:

#!/usr/bin/env ruby     

rails_path = File.expand_path(''../../'', __FILE__)
puts rails_path

`mkdir public/images`

Dir.glob("#{rails_path}/vendor/assets/**/images").each do |directory|
  `cp #{directory}/* #{rails_path}/public/images/`
end

`mkdir public/fonts`

Dir.glob("#{rails_path}/vendor/assets/**/fonts").each do |directory|
  `cp #{directory}/* #{rails_path}/public/fonts/`
end

• Configure nginx en sus máquinas de producción para servir public / images y public / fonts .

        location ~ ^/(assets|images|fonts)/(.*)$ {
            alias /var/www/my_app/current/public/$1/$2;
            gzip on;
            expires max;
            add_header Cache-Control public;
        }

A partir de ahora, cada vez que diga cap production deploy , se ocuparán de todas las cosas manuales.

Answer 14

Solo usa:

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

en su archivo SCSS o SASS. "bootstrap-sprockets" es necesario para corregir la imagen y la fuente.

Es probable que ya tengas:

@import "bootstrap";

declarado en application.scss.

Answer 15

Tuve el mismo problema y encontré una solución. El crédito completo es para Eric Minkel , quien escribió una publicación detallada del blog sobre el tema. Sugeriría leerlo para un razonamiento adicional.

1. Edite la app/assets/stylesheets/application.css agregando:

   *= require bootstrap

2. Edite la app/assets/javascripts/application.js agregando:

   //= require bootstrap

3. En config/application.rb , agregue lo siguiente después de class Application < Rails::Application . Debe tener un aspecto como este:

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

4. En la terminal, compila tus activos ejecutando:

   rake assets:precompile RAILS_ENV=development

5. Edite el archivo bootstrap.css cambiando las ubicaciones de recursos @font-face de ../fonts/ a /assets/ . Debe tener un aspecto como este:

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

Ya terminaste Simplemente reinicie con rails s y los glifos deberían aparecer.

Answer 16

Tuve un problema similar y descubrí que se estaba publicando una versión anterior de los recursos de arranque. Gracias a esta publicación: Rails con Twitter Bootstrap: aún sirviendo a un viejo activo , acabo de ejecutar rake tmp:clear y todo funcionó después de eso.

Answer 17

Usando rieles 4.2.6

Tuve que editar config/application.rb

Agregué esta línea

.
.
.
class Application < Rails::Application
   config.action_controller.relative_url_root = ''/myapp''

Ahora las fuentes se referenciaban en relación con el valor relative_url_root .

Answer 18

Yo tuve el mismo problema. Algo está mal con la ruta de la fuente en bootstrap. Afortunadamente es una solución bastante fácil:

$icon-font-path: ''bootstrap/'';

Esto me lo arregló. Debería ir antes de importar bootstrap-sass. Es posible que deba cambiar el valor aquí.