Rails 5.1.2 bootstrap icons not being served in pr

Question

This is an Awesome place. I hope to be competent enough soon to contribute solutions.

Please, somebody help!!?!

I have watched hours of youtube and read every post about asset pipeline pre-compilation on the web.

For whatever reason I decided to use Rails 5.1.2 and I don't know if that is the problem.

glyphicons don't render on Heroku or using

rails s -e production 

on my local ubuntu.

I type

rake assets:precompile RAILS_ENV=production

and get

I, [2018-01-01T16:05:07.261287 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf
I, [2018-01-01T16:05:07.261968 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf.gz
I, [2018-01-01T16:05:07.263049 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff
I, [2018-01-01T16:05:07.264510 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff2
I, [2018-01-01T16:05:07.289833 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/application-c29c47294834d3d47956f910a3182df4a7db7d5864e82c6f758027f30669bafb.js
I, [2018-01-01T16:05:07.290028 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/application-c29c47294834d3d47956f910a3182df4a7db7d5864e82c6f758027f30669bafb.js.gz
I, [2018-01-01T16:05:14.175848 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/application-b896db4d9b9e69049347e71a1825dcdc1a4eed9147196fdd761afe6f12b556d4.css
I, [2018-01-01T16:05:14.176068 #4745]  INFO -- : Writing /home/dracos/rails/video-store/public/assets/application-b896db4d9b9e69049347e71a1825dcdc1a4eed9147196fdd761afe6f12b556d4.css.gz

but in log/production.log I get

FATAL -- : [849248f2-cd3c-4912-a10d-4f63bd5857ae] ActionController::RoutingError (No route matches [GET] "/assets/glyphicons-halflings-regular.ttf"):

FATAL -- : [dfae9054-ad8a-4553-85a3-c55d55b1946c] ActionController::RoutingError (No route matches [GET] "/assets/glyphicons-halflings-regular.woff"):

etc...

Me no get?!? I won't pretend to understand all the voodoo goings on under the bonnet of the asset pipeline and want now to not be newbie but this!?!? Why? Can anyone let me know?

My /app/assets/stylesheets/bootstrap.css has been amended to show

@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.woff2') format('woff2'),   
    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');
}

and, interestingly enough the /assets/ part gets added even if I leave it out of the url path in the above file altogether. I have tried everything. Can anyone help? Any help would be much appreciated.

Cheers

Answer 1

You can solve this problem following this way -

1. Create a folder name "fonts" inside the app/assets directory and place place bootstrap fonts (glyphicons-halflings-regular.eot, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff etc) fonts inside the fonts directory.

2. Now add this line to config/application.rb

   config.assets.paths << Rails.root.join("app", "assets", "fonts")
   

3. Now you have to rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss and place to bellow code-

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

4. Now add fonts to config/initializers/assets.rb for Precompile additional assets.

   Dir.glob("#{Rails.root}/app/assets/fonts/**/").each do |path|
     Rails.application.config.assets.paths << path
   end
   

5. Restart the web server.

I hope now it should work.

Answer 2

Building on fool-dev's answer... Using Rails 5.1.4, yarn, and webpacker... All that was needed was to copy the bootstrap font files from bootstrap/dist/fonts/ to public/fonts and re-deploy.

Didn't have to mess with the supplied bootstrap/dist/css/bootstrap.* files at all.

Answer 3

If you wish to keep your assets in /assets folder only and not in /public folder.

Firstly, You can place all glyohicons' fonts file in /assets/fonts folder. (If /fonts not created, then create one).

Secondly, convert your .css file into .scss file by renaming it so that you can use assets_path method in stylesheet

Then, let your application know that you have fonts as an asset too by adding following line in your application.rb file

config.assets.paths << "#{Rails.root.to_s}/app/assets/fonts"

Then, change your urls in bootstrap.scss file in a following way.

src: url(asset_path('glyphicons-halflings-regular.eot'));

Restart the server and check, fonts should get loaded as assets.

Thanks.

Answer 4

You can write asset pipeline, you can move your font file to public folder like create folder inside public/assets named fonts which looking public/assets/fonts/ then upload your fonts files here this look likes public/assets/fonts/glyphicons-halflings-regular.woff and change paths like /assets/fonts/glyphicons-halflings-regular.woff or /assets/glyphicons-halflings-regular.wof

Hope to help