Ionicons: The premium icon font for Ionic Framework - Kodhus

Ionicons: The premium icon font for Ionic Framework

Ionicons is the premium icon font for Ionic Framework. It is 100% free, open source and MIT Licensed. It includes 733 useful and clean icons!
In order to use Ionicons you need to either link it’s stylesheet in your html page or use @import command in your css file stylesheet like the following!

@import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');

Then you can add any icons that is included in their package in 2 different ways!

Using icon tag or <i></i>

Let’s take NodeJS icon as an example. In your html you need to put the following tag:

<i class="ion-social-nodejs"></i>

It will show as follow:

Using pseudo elements and it’s css content

Sometimes you want to use the content property of css pseudo elements to add the icon font to your interface. Imagine I have an image slider and I want to add left and right arrows. Either I can use I tags and position them correctly apart from my slider panel or I can use just one slider panel and achieve the same thing using :before and :after pseudo elements!
Ionicons has a cheatsheet that contains all the Css contents for each icons they have! Following is the code snippet on how to use it in your stylesheet:


.classname:before {
  content: '\f124';
  font-family: Ionicons;
  ....
}

Let’s take a look at an example:

You can use pretty much these same techniques to use any Icon font there is on the web! There are bunch of other icon fonts that are used extensively in websites that we will introduce in future articles! Enjoy!

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

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