If you’re using Bootstrap, then you’re most certainly designing responsive layouts. And while responsive design has done wonders for creating mobile friendly web pages, it has also created new issues for designers.
One of these issues is the use of icons. The problem with image icons is that they don’t scale well and they’re difficult to manipulate without the help of an image editor. They can also add to the weight of a website and lead to slower load times.
The solution? Icon Fonts.
Icon fonts are much more scalable and easier to manipulate. As you can see in this CSS tricks example, you can change the size, color, and shape of an icon font all through the use of CSS modifications. No need to play around with Photoshop.
Now that you understand the power of icon fonts, let’s go over 7 essential resources when working with Bootstrap.
Font Awesome
By far the most widely used icon font by Bootstrap enthusiasts. As of version 4.1, this iconic font now has 431 icons to choose from. You’ll undoubtedly see Font Awesome being used in many of our Bootstrap themes.
Font awesome is also great on retina displays and it’s compatible with screen readers. For instructions on how to implement it on your site, check out our video tutorial.
Fontello
An easy way to create a custom icon font for your site. You can select which images you want from the large collection then download a webfont pack with just one click.
Elusive Icons
Elusive Icons is a webfont that can be used with any of your Bootstrap projects.
When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on github.
Font Custom
Font custom enables you to generate custom icon webfonts from the comfort of the command line.
Font Custom creates styles using Bootstrap’s .icon-{{your-icon-name}} naming convention. Just include fontcustom.css and you’re set.
Icon Search
Icon search is a resource that matches user provided tags with Bootstrap’s built-in icon classes. It was created to make it much easier to find the appropriate classes for icons.
For example, if you type in “message”, it will give you the proper classes for the envelope and inbox icons.
GlyphSearch
Similar to icon search, Glyph Search allows you to search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons.
Bootstrap Arrows
Not exactly an icon font but still handy none the less. Bootstrap Arrows is a simple jQuery plugin and add-on to the Bootstrap framework to include the use of arrows at any angle in your UI designs.
Conclusion
Now you realize how great icon fonts are and why you should be using them for your Bootstrap site. If we left out a great resource, let us know in the comments below.
