The new version of Bootstrap is smaller in size than the old and one way it does this is by getting rid of the icons that came with the framework. That means that if you're migrating a site, you'll loose existing icons. Your options are getting your own license for Glyphicons, or look for other icon sets, or look for a library like Font Awesome which is your best bet for a free solution.
- View Offline
- [Voiceover] The new version of Bootstrap is significantly smaller in size than the old one, and one of the ways it does this is by getting rid of the icons that came with the framework. So, one of the things you'll notice is that the fonts that came in Glyphicons are no longer included in Bootstrap. That's gonna be important if you are migrating the site, you're gonna lose those, so, let's take a look at what the options are. First off, you can get your own license for Glyphicons, and you can do this at this URL. The license is fairly inexpensive, it's only 59 dollars, and you get a bunch of different things.
There are some cheaper licenses, so you can get this 25-dollar license, but the one thing you want here is to get the fonts, and those are only included in Glyphicons Pro. Bootstrap actually uses the 300 Glyphicons Halflings, which you can see right here. Getting the Pro is actually gonna give you access to a lot more icons, 800 icons so far, and you get free updates in the future, so that's actually pretty cool. Another thing you'll get with this is all the CSS that you'll need to include with Bootstrap.
Now, there are some other icon sets that you can use. For example, you can find something called GitHub Octicons. Mark Otto, one of the developers of Bootstrap, works at GitHub, and this is one of their recommendations. Now, this obviously has a lot less icons, but, hopefully, it's something that we'll see growing in the future. Your other option is to use the really nice Font Awesome library, and this one is really easy to implement into your existing projects.
And the reason for that is that a lot of the names of the icons are gonna be the same, and all you need to do is click on this Get Started link right here, and you can install it different ways, you can download it in different places, but at the very top, you're gonna get this link right here to the CDN, or a Content Delivery Network, which essentially hosts all of the icons, and that means that you don't have to download anything, you just grab this link and include it into your projects.
So I'm gonna go ahead and do that. And right now I've got a page that looks like this, so, I'm gonna go into the HTML, and at the very-very top I'm going to add this link. I usually add this, maybe, before some of my CSS, definitely before your own style sheets, so, I'm putting it before the Bootstrap CSS, just make sure that it goes before any CSS that you write yourself. So I'm gonna save that.
And if I go into my list of items here, you'll notice that I have some list items, let me switch this to a layout that looks like this. And notice that I've left in here an icon that is currently not showing up. In Bootstrap 3, this is essentially how you added any icon to an element: you created a span, and then gave it a class of glyphicon, and then also a class for the individual icon.
So, if we go into the documentation for Font Awesome, you'll notice that their instructions are a little bit different. Let's go over here to where it says "Icons". And what you do here is you can do a search, or you can click on any one of these icons. So, let's do a search for "home". You can see that this is the icon that we want to use, because it's gonna be for the homepage. If you click on this, you'll get the code, and notice that they are asking you to use the i tag instead of a span, and then the prefix is fa.
So instead of using glyphicon, glyphicon-home, you could just use fa, fa-home, which is actually a little bit shorter. And so, what you could do is just go into your icons and modify this glyphicon to just be fa and fa-home. You don't have to switch the span tag to an i tag, and I'm gonna go ahead and save this, and switch over, and you will see that the home icon looks really nice. And so this other library called Font Awesome is gonna work really well with Bootstrap.
It's not always gonna match perfectly, but it's a really nice option, because it's completely free, and it does have a lot of icons available, and you can implement it into your projects very quickly by just adding a CDN link.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes