icons-ionic-framework

Ionic offers free icons as part of its library. Ionic offers more than 500 icons. You can get the all the icon using

http://ionicons.com/

The above site displays all the available icons and their corresponding class name. We can use those class name in our mobile application.

For example,


<i class="icon ion-star"></i>

An icon must be prefixed before the icon class name. You can choose your desired icons from above-mentioned website. If you want to use compass icon use


<i class="icon ion-android-compass">

Ionic does not restrict you to use its own icon, you can use any icon library in the Ionic Framework because it supports web development also. Say, for example, we can also use popular icon providers, such as Font Awesome, Glyphicon. To learn how to use Font Awesome icon, scroll down to the end of this page.

We can use icons at header and footer.

For header


<ion-header-bar class="bar-royal">

    <h1 class="title">Ampersand Academy <i class="icon ion-calendar"></i> </h1>

</ion-header-bar>

<ion-header-bar class=" bar-subheader">

    <h2 class="title"><i class="icon ion-briefcase"> </i> Icons</h2>

</ion-header-bar> 

Here ion-calendar used in the header and ion-briefcase used in the footer.

For footer


<ion-footer-bar class="bar-royal">

   <h6 class="title " style="text-align:left;"> <i class="icon ion-at"></i> AmpersandAcademy.com</h6>

</ion-footer-bar>

How to use Font Awesome icon in Ionic Framework?

Font Awesome is very popular icon library among web developers. We can use Font Awesome icon inside Ionic Framework.

So first, include the Font Awesome CSS file or CDN in head of your HTML file


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

You can use either CDN or download the CSS file and include inside your project folder. The best practice for mobile application development is, you can download and save the file inside your project folder (www). That’s all. Now you can create Font Awesome icon, using fa as prefixed in icon class.


<i class="fa fa-envira" aria-hidden="true"></i>

Note: If you want to use Ionic Framework icon, you must use an icon as a prefix. If you want to use Font Awesome icon, use fa as a prefix. Don’t forget.