CODEWITHSUNDEEP
angularionic2
Ahmer Ali Ahsan
Ahmer Ali Ahsan

Reputation: 6126

Font Awesome with Ionic2

How to use Font Awesome icons with <ion-tab></ion-tab>?

What I am trying:

<ion-tabs>
    <ion-tab [root]="tab1Root" class="fa fa-calculator" tabTitle="Home" ></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="fa-calculator"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Upvotes: 4

Views: 1818

Answers (1)

Suraj Bahadur
Suraj Bahadur

Reputation: 3928

Here is my solution to add Font Awesome <ion-tab></ion-tab>

Note: Make sure you have properly installed font awesome in your ionic project.

your-example.html

<ion-tabs tabsPlacement="top" >
  <ion-tab [root]="tabAlgorithms" tabTitle="Algorithms" tabIcon="fa-sitemap" ></ion-tab>   
</ion-tabs>

your-example.scss

.fa-icons-general {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.ion-ios-fa-sitemap::before,
    .ion-ios-fa-sitemap-outline::before,
    .ion-md-fa-sitemap::before {
        @extend .fa-icons-general;
        content: "\f0e8";
    }

Hope this will solve your problem.

Upvotes: 1

Related Questions