When deploying a Rails application to Heroku, the default settings will usually break the pretty icons that we use in conjunction with our gem, Bootstrap. However, a quick fix will make those icons load as normal.
It can be frustrating. You have the nicest looking webpage when you host it on your local machine. However, after you deploy to a third party host, things get broken. One of the most noticeable is when you are using Bootstrap to create quick pictures for your buttons. Everything looks great, and then you send the application to Heroku. You check your page online, and many buttons end up having this:
They just replace your nice icons with boxes! Some may look similar, but are far from pretty. If Bootstrap icons don’t work when you deploy, what is the point to using them?
Fear not, because there is an easy fix. In your project, navigate to your config/environments/production.rb file. Down near line 31 you will probably see:
| # Do not fallback to assets pipeline if a precompiled asset is missed. | |
| config.assets.compile = false |
Here you will want to change the configuration. After researching this problem, I found that Heroku is skipping some of the assets because of this configuration. We want to tell it to go find those assets that we are referring to when it can’t find them, such as our Glyphicons we are using that are included in our Bootstrap files. You can find more on this topic on GitHub or on StackOverflow. Here is what we can change it to:
| # Do not fallback to assets pipeline if a precompiled asset is missed. | |
| # But for Heroku, we need to get those assets, namely glyphicons. | |
| config.serve_static_assets = true | |
| config.assets.compile = true |
After reading, most people just recommend changing the false to true for config.assets.compile. However, I read about the serve_static_assets, and it seemed to be related. So I threw that in there. Go ahead and test for yourself what you should need for Heroku. This should change your buttons to look nice like:
‘,=)
Ryan Spittler 