How To Embed And Use Glyphicons On Your Website

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 has been the flavor of the 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 <head> 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(https://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.5.0.zip) Font Awesome manually and serve it from your own server.

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

In this list(https://fortawesome.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> fa-calendar-o

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 red-icon”></span> fa-calendar-o

Would create a double-sized calendar icon.

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

.red-icon {

color: red;

}

Another really good alternative to 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:

After downloading(https://github.com/stephenhutchings/typicons.font) the files, 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=’folderlocation/src/font/typicons.min.css’ />

Don’t forget to change the “folderlocation” part to the path to your Typicons folder.

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;

}

(This article has no conclusion, it was part of an on-going series I had being working on for like a year at this point)

Show your support

Clapping shows how much you appreciated Carlos Wagner’s story.