Bootstrap icon fonts

Bootstrap Icon Fonts: 7 Essential Resources

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.

If you want to see more examples and a complete tutorial on typography, you can check out our new article about Bootstrap 4 Typography and Icons.

 

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.

Sharing is caring!

Christopher Gimmer

Christopher is an entrepreneur & the co-founder of BootstrapBay. He helps web designers, developers and entrepreneurs utilize the power of Bootstrap. Connect with him on Twitter.