Best practice when adding FontAwesome to an ionic app

Image

There is still a lot of confusion out there on what is a best practice when it comes to adding FontAwesome to an ionic app, and this tutorial will try to mitigate some of that confusion.

For this post I will use the Ionic Super Starter template. Also, for the purposes of this tutorial, I’m assuming you already have ionic fully configured and running on your DEV environment.

First Thing’s First: Ionic Info

Ionic is moving at lightning speed (kudos to the ionic team :thumbsup:) so check your local configuration against the dependencies below, in particular the Ionic App Scripts Version. This is very important for this tutorial!

Dependency Version
Cordova CLI 7.1.0
Ionic Framework 3.9.2
Ionic CLI Version 3.18.0
Ionic App Scripts Version 3.1.0
Node Version v9.1.0
NPM 5.5.1

TL,DR

In a hurry? get the code from the marketplace

You will learn

  1. How to install the ionic Super Starter template
  2. How to install FontAwesome in your ionic app
  3. How to add FontAwesome icons to menu items


Install the ionic Super Starter template

Open a command prompt and type the following command to create our LiveFontawesome app

ionic start LiveFontawesome super

Once installation is complete

  1. navigate to your new app’s root folder cd LiveFontawesome
  2. Run ionic serve to run your app in the browser (I’m using Chrome)

If all went well, you should see something like this
image-title-here


Install FontAwesome

Here are the steps to install FontAwesome in your app:

  1. Install the npm font-awesome package
  2. In the <head> of your index html page, reference the location to your font-awesome.min.css
  3. Add a custom Copy Script


1. Install the npm font-awesome package

Type the following in the root folder of your new app. This will add the font-awesome folder under node_modules. The --save option will include the package inside the dependencies section of your package.json file automatically

npm install --save font-awesome

Notice that the version of FontAwesome installed at the time of this post is 4.7.0 as shown below

image-title-here

2. In the <head> of your index html page, reference the location to your font-awesome.min.css

Open your index.html page under src and add the following reference. Please note that the location path below doesn’t exist yet. It will be created automatically once we complete step 3

<!-- Font-awesome -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet"/>

Here’s a screenshot of what it looks like

image-title-here

3. Add a custom Copy Script

Ionic includes a copy script file that is called during the build process when you run ionic serve and it’s responsible for moving certain resources from node_modules to the www folder, like ionicons. The location of this script is as follows

fontawesomeapp/
├── node_modules/
│   ├── @ionic
│   │   ├── app-scripts
│   │   │   ├── config
│   │   │   │   └── copy.config.js

We’re going to make a copy of this file, call it copy-custom-libs.js and place it in a new folder called scripts under the root folder of our app.

fontawesomeapp/
├── scripts/
│   └── copy-custom-libs.js

Once we add our FontAwesome entries to this script, your copy script should look like this


// Added font-awesome as custom script

// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string
const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
module.exports = Object.assign(existingConfig, {
    copyFontawesomeFonts: {
      src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
      dest: '{{WWW}}/assets/fonts'
    },
    copyFontawesomeCss: {
      src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
      dest: '{{WWW}}/assets/css'
    }
  }
);

Last but not least, we need to instruct ionic that we want to use our new copy script as opposed to the one that is included already. For that, we need to open our package.json file and add the following section

 "config": {
    "ionic_copy": "./scripts/copy-custom-libs.js"
  }

Here’s how your package.json file should look like once complete

image-title-here

That’s it. If you run ionic serve your app will have full support for FontAwesome icons


Let’s see it in action

Our side menu looks a little dull, so we’re going to spice it up a bit by adding FontAwesome icons to the left of each menu item with an assigned color

image-title-here

Open the app.component.ts file under src/app and modify the pages: any[] array object to include two new elements: icon and color as follows

pages: any[] = [
  { title: 'Tutorial', component: TutorialPage, icon: 'book', color: 'faGreen' },
  { title: 'Welcome', component: WelcomePage, icon: 'handshake-o', color: 'faOrange' },
  { title: 'Tabs', component: TabsPage, icon: 'window-restore', color: 'faLightBlue' },
  { title: 'Cards', component: CardsPage, icon: 'address-card', color: 'faYellow' },
  { title: 'Content', component: ContentPage, icon: 'file-word-o', color: 'faOrange' },
  { title: 'Login', component: LoginPage, icon: 'unlock', color: 'faGreen' },
  { title: 'Signup', component: SignupPage, icon: 'pencil', color: 'primary' },
  { title: 'Map', component: MapPage, icon: 'map-o', color: 'faYellow' },
  { title: 'Master Detail', component: ListMasterPage, icon: 'tasks', color: 'faOrange' },
  { title: 'Menu', component: MenuPage, icon: 'bars', color: 'faLightBlue' },
  { title: 'Settings', component: SettingsPage, icon: 'cog', color: 'faGreen' },
  { title: 'Search', component: SearchPage, icon: 'search', color: 'faOrange' }
]

Now let’s add the icon element to the template

@Component({
  template: `<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          <i class="fa fa-{{p.icon}} {{p.color}}" aria-hidden="true"></i>
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>
  <ion-nav #content [root]="rootPage"></ion-nav>`
})

Lastly, open your app.scss file and add the following classes

.faGreen {
   color: #28a54c;
}
.faOrange {
   color: #ff6600;
}
.faLightBlue {
   color: #31C0E6;
}
.faYellow{
   color: #f2c100;
}


How can I change the icons at the ion-tab?

I get this question very often so I decided to add a simple and cool hack I found in the ionic forums if you want to use Fontawesome in the tabbar (see original post here)

Open your tabs.html file and modify the markup to include your fontawesome icons, as shown below. Please note that in this example I am using Fontawesome icons on the first two tabs. The last tab is still using ionicons to prove they can live side by side:

<ion-tabs>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="fa-home"></ion-tab>
  <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="fa-search-plus"></ion-tab>
  <ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>

Open your tabs.scss file and add the following styles for the first two tabs on the tabbar:

page-tabs {
    // Hacks for font awesome icons in tabbar
    // see https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/2
    // the content code of each fa-icon can be found here: 'node_modules/font-awesome/css/font-awesome.css'
    .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-home::before,
    .ion-ios-fa-home-outline::before,
    .ion-md-fa-home::before {
        @extend .fa-icons-general;
        content: "\f015";
    }

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

Here’s what it should look like if you followed the steps correctly:

image-title-here


That’s it. I hope you enjoyed it!!!

Me

Luis Cabrera is a family man and a dedicated dad. He lives in Florida, where he works as an Applications Architect for one of the most recognizable brands in the US. In his spare time, Luis likes to develop apps using ionic and Firebase. Aside from technology and family, he enjoys the outdoors and working on his horse farm.

Older posts...

Written by

Get in touch!

Notice any mistakes?
Leave me a message