Bootstrap 4 – Glyphicons migration?

Among all the practicalities brought to web development by the Bootstrap framework along the years, icon words were arguably one of the most important. Up until its latest version, Bootstrap had the Glyphicons library included by default in its framework. The package’s sharp clean and minimalist icons were of super easy integration and fitted well in almost any project. Either were you developing websites, web apps or wire-frames, glyphicons were the go-to icon pack for a lot of developers.

With the popularization of more complete alternatives like Font Awesome and Typicons, that bring a way bigger variety of icons and applicabilities to the table, the removal of Glyphicon from the Bootstrap framework was inevitable.

Icons are of utmost importance though, and having to manually integrate external packs can be confusing and extremely frustrating for beginners.


The best alternatives to Glyphicons and how to integrate them

Font Awesome

Font Awesome has been the flavour of month for the developer community for a while now. Full CSS control is given to you towards the 605 beautiful vectors that are currently featured in the pack.

This completely free library is constantly being updated with new icons and is very easy to integrate, all you have to do is add their CSS to your website. To do this, you can either put their CDN directly on the of your HTML file using the line:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Or download Font Awesomemanually and serve it from your own server or computer.

After integrating the library, you can add any of the package’s icons anywhere you want on your page, by using the span or i tag and the fa CSS Prefix.

In this list(https://fontawesome.github.io/Font-Awesome/cheatsheet/) you can find all the icons that come included in the pack, and their specific CSS classes.

For example:

<span class="fa fa-calendar-o red-icon"></span>

Would add the calendar icon.

After that you can edit your new calendar icon in any way you want.

Change sizes for example by using the fa-2x, fa-3x, fa-4x or fa-5x classes.

<span class="fa fa-calendar-o fa-2x"></span>

Would create a double-sized calendar icon.

Changing your new icon’s style like it’s color is just as easy. In the CSS file, try including something like:

.red-icon {
  color: red;
}

 


Typicons

Another really good alternative to Bootstrap Glyphicons is Typicons. The icon pack contains 336 completely fully customizable vectors free to use in all your web applications.

Installing Typicons is just as easy as installing Font Awesome:

You can use a CDN or download the files locally, all you have to do in order to start serving the CSS is include the “typicons.min.css” file as reference in the head of your HTML file.

This is what it should look like:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css" />

Don’t forget to change the “folderlocation” part to the path to your Typicons folder if you’re serving the files locally.

After integrating the library, to include the icons in your website a simple span tag followed by typcn typcn-classname will do.

You can find all the icons and their class names in here(http://www.typicons.com/).

For example:

<span class="typcn typcn-calculator green-icon”></span>

Would add the calculator icon.

After that, you can edit your new calculator icon in whatever way you want through the CSS file.

.green-icon{
  color: green;
  font-style: normal;
  size: 300px;
}

More

You can use the same approach used in the above two examples to implement pretty much any font icon library. Here’s some others you might like:

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *