Silly mistakes
I was avoiding upgrading to Bootstrap 4 for a project I have been working on because each time I did all of my Glyphicons would stop working and I just didn’t have the time or patience to figure it out. Little did I realize it was actually my fault for making an assumption, which I am pretty sure other developers have been making as well.
I thought that Glyphicons actually belonged to Bootstrap, when in fact it doesn’t. Glyphicons actually belongs to Glyphicons.com.
You can read an old post concerning the fuzzy legality about the usage of the Halflings icon set here: https://github.com/twbs/bootstrap/issues/3942
Assumptions make asses out of you and me
Quite literally Bootstrap says on their migration page that Glyphicons has been dropped from Bootstrap entirely and has been replaced by Font Awesome here: https://getbootstrap.com/docs/4.0/migration/
Gotcha
Upgrading is not straightforward because if you were under the poor assumption stated above you probably thought that Glyphicons was a core piece of Bootstrap (which in a way it was). You can upgrade from your old version of Bootstrap to version 4, but you are going to have to put more work into it than just pressing the upgrade button in NuGet or replacing a bunch of CSS files.
High level upgrade steps
Everyone’s site is different, so these steps will not answer everyone’s questions, but it should at least cover the most common issues that no one has seemed to have given a properly formed answer to.
- Make sure you have a way to undo your changes before beginning
- Upgrade your version of Bootstrap to version 4 (as of 06/28/2018)
- I recommend using NuGet if you can because it will auto upgrade your files for you
- As previously stated the font files in your application’s “~/font” folder will be swapped out from using Halflings (from Glyphicons) to Font Awesome.
- This last part is entirely up to you to do manually, there is no automatic upgrade step here. You must go through your application and change every single mention of “glyphicon” to “fa”
- This is not fool proof or a sure thing. A good portion of the class values will not translate well, so you have to go through each class declaration where you were using glyphicons and change it to an equivalency.
Examples of things I found that didn’t translate well
I am in no way saying that these are equivalent forms, but what I am saying is that I had to make choices on the fly during upgrade of what I was going to us instead of what I was using previously. There isn’t a clear equivalent sometimes which will present a problem when upgrading. Take your time doing this, but don’t worry you can always change it later too.
| Glyphicons | Font Awesome |
|---|---|
| glyphicon glyphicon-floppy-disk | fa fa-save |
| glyphicon glyphicon-plus-sign | fa fa-plus |
| glyphicon glyphicon-ok-sign | fa fa-check-circle |
| glyphicon glyphicon-remove-sign | fa fa-remove |
Here is an example outside of the fonts that didn’t translate well for some reason:
“btn btn-info btn-md” versus “btn btn-info btn-lg”
I keep seeing squares where there should be icons?
This is literally due to what I am describing in the above section. There is a bad translation in the CSS value for your class selection. In other words, the class you are attempting to load doesn’t exist, select a suitable replacement class. That’s why I am providing examples of the poor transition in the above table.
Conclusion
This is a big under taking if you are heavily using the font library among other changes. Therefore consider the risk involved before jumping to this version. You will have to test all of your UI especially for production applications.