Bootstrap Icons

Overview

In the pages we create sooner or later comes the time when we want to express sometime a whole concept with least characters possible or with a single appealing character eventually. At this point the ones we can’t without are the icon elements – light in weight these vector symbols resize freely to display the same way in small and even full screen sizes and some of them are so well thought so a single icon can actually be used for showcasing an entire concept. And to make things even better – there are plenty of free libraries with hundreds of these useful things around the net for free.

Even the Bootstrap framework used to come with about 250 iconic images included and for a while they could be seen in particularly every third web site around but this is no more. With the growing popularity of various free icon libraries the development team has decided there is no need for a fixed in number icon libraries when we can practically have unlimited number or differently icons and add just the ones we really need for our projects. So with its new fourth version the Bootstrap framework dropped the included in the previous Bootstrap 3 icons ( also known as Glyphicons ) and instead of including one or many of the gaining popularity icon fonts just got constructed in a way to work along smoothly with any of them giving the web designers the freedom to use whatever they want still keeping low the server load – only the icon fonts needed get loaded and even better many of them do have own CDNs.

Yet another excellent feature

When it comes to external icon fonts another good thing is along with the CDN links most of them ( or at least the most popular ones ) come along well packed with a detailed documentation, examples and the best part some useful tables or Cheat Sheets presenting all the available characters along with their corresponding classes or in some cases – entire snippets to be just copy / pasted at the appropriate place in your projects.

While we took a detailed look at the most popular iconic fonts in the Glyphicons theme along with the ways of installing them and inserting some of their icons in our projects here we’re just going to take a brief glance at them along with the links to the websites you can download them from.

Exactly what do we offer to use

Font Awesome – the absolute favorite with plenty of icons and a tailor made CDN option – you can find it over here - http://fontawesome.io/

Material Design – over 900 symbols and a CDN from Google - https://material.io

Generally, all of these get used with a wrap in a span element along with the appropriate icon class utilized and with the use of the cheatsheets people don't need to make an effort remembering anything but only copy and paste a certain snippets. This is the way Bootstrap 4 both simplifies the icon fonts attachment with no limiting us with a predefined listing of signs to choose from.

Mobirise Icons is an icon font given by the team that develops the Mobirise Landing page Maker. This pack offers 124 classics, pixel-perfect line symbols. Accessible as internet icon fonts and SVG files, in 30px and 24px grid, 7 groups. - https://mobiriseicons.com/