Bootstrap Glyphicons

Intro

In the past few years the icons got a significant part of the web pages we got used to both viewing and creating. With the clean and symbolic intuitive meanings they almost instantly relay it became much easier to set a focus point, showcase, fortify or explain a particular point without loading spending tons of time searching or composing appropriate images and adding them to the load the browser has to carry each time the page gets displayed on a visitor’s screen. That’s why in time the so beloved and conveniently included in the most popular mobile friendly framework Glyphicons got a permanent place in our way of thinking.

Extra solutions

However the things do move forward and not back and with the latest Bootstrap 4 the Glyphicons got left behind since so far there are quite a few decent replacements for them offering a lot greater variety in the shapes and styles and the same ease of use. So why narrow down your imagination to just 250 symbols when you can have thousands? So the pioneer stepped back to enjoy the blooming of a vast varieties of free iconic font styles it has evoked.

So in order to get use of some good looking icons along with Bootstrap 4 all you need is picking up the library fitting best for you and include it in your pages either by its CDN link or by downloading and hosting it locally. The latest Bootstrap version has being thought perfectly work along with them.

Effective ways to use

For productivity purposes, all of the icons require a base class and a separate icon class. To utilize, place the following code pretty much any place. Ensure to leave a field in between the icon as well as the message for a proper padding.

Don't mix including some other components

Icon classes can not be straight combined by using other types of the elements. They really should not be employed alongside other classes on the same element. Instead, add a embedded <span> and use the icon classes to the <span>.

Primarily just for operation with the empty elements

Icon classes need to only be utilized on the elements that have no text message material and possess no child elements.

Switching the icon font setting

Bootstrap supposes icon font data will likely be located in the ./ fonts/ directory, relative to the organized CSS files. Transporting or even relabeling those font files determines modifying the CSS in one of three solutions :

- Turn the @icon-font-path and/or @icon-font-name variables within the resource Less files.

- Operate the connected URLs option supplied by Less compiler.

- Update the url() paths within the compiled CSS.

Put to use any option best fits your specific development system.

Usable icons

Modern releases of the assistive technologies will certainly introduce CSS developed information, along with specific Unicode personalities. To prevent tricky and unintended output in display readers ( especially if icons are taken just for decoration ), we hide them by using the aria-hidden="true" attribute.

In the event that you're utilizing an icon to reveal meaning (rather than simply as a decorative element), ensure that this particular significance is equally conveyed to the assistive technologies - as an example, feature supplementary content, visually hidden with the . sr-only class.

In the event that you're generating controls without any alternative content (such as a <button> which simply includes an icon ), you should certainly always ensure alternative web content to find out the function of the control, to make sure that it is going to make a good sense to the operators of assistive modern technologies. In this particular situation, you could possibly add an aria-label attribute on the control itself.

Some popular icons

Here is a list of the most popular free and rich iconic fonts which can be easily used as Glyphicons replacements:

Font Awesome – including more than 675 icons and more are up to come. These also come in 5 additional to the default size and the site provides you with the options of obtaining your personal adjustable embed link. The use is pretty simple – just insert an <i> or <span> element and apply the appropriate classes to it looking from the convenient Cheat Sheet they have provided over here http://fontawesome.io/icons. Additionally you can select to either include the fonts library as js file with some accessibility options or as a plain stylesheet.

One more catalogue

Material Design Icons – a library with over 900 icons utilizing the Google Fonts CDN. In order to include it you’ll need only the link to Google’s CDN <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> and you can also find a detailed list of all the available icons over here https://material.io/icons/ along with the code needed for embedding each one. The procedure is pretty much the same except that only the main .material-icons class gets assigned to the span element and its content actually defines which icon will get included on your page – pretty much the names of the icons themselves with the space replaced by the underline _ character. The option for downloading single items as image or vector file is available too.

A bit compact collection

Typicons – a bit smaller library with about 336 items which main page is also the Cheet Sheet http://www.typicons.com/ where you can get the particular icons classes from. The use is pretty much the same – a <span> with the appropriate classes assigned. They are however a self-hosted asset – you’ll need to download them and host on your own server.

So now all that’s left for us is taking a glance at all of them and picking up the right ones – luckily the online catalogs do have a convenient search feature as well.

Final thoughts:

And so these are some of the substitutes to the Glyphicons directly from the old Bootstrap 3 version which can possibly be used with Bootstrap 4. Working with them is simple, the documents - commonly extensive and at the bottom line just these three options provide almost 2k clean pleasing iconic images which compared to the 250 Glyphicons is just about 10 times more. So now all that is really left for us is having a view at all of them and securing the suitable ones - fortunately the online catalogs do have a handy search engine component as well.

The best way to put into action the Bootstrap Glyphicon:

Linked topics:

Bootstrap Glyphicons concerns

Bootstrap 4 - Dropping Glyphicons

Bootstrap 4 - Glyphicons migration