Best practice when adding FontAwesome to an ionic2 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 ionic2 app, and this tutorial will try to mitigate some of that confusion.

This is the first post of the ionic2 weekly challenge series (#ionic2weeklychallenge) and 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 0.0.48 - this is very important for this tutorial

Dependency Version
Cordova CLI 6.5.0
Ionic Framework Version 2.0.0
Ionic CLI Version 2.2.1
Ionic App Lib Version 2.2.0
Ionic App Scripts Version 1.0.0
ios-deploy version Not installed
ios-sim version Not installed
OS Windows 10
Node Version v6.7.0
Xcode version Not installed

You will learn

  1. How to install the ionic Super Starter template
  2. How to install FontAwesome in your ionic2 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 fontawesomeapp

ionic start fontawesomeapp super --v2

Once installation is complete

  1. navigate to your new app’s root folder cd fontawesomeapp
  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
module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
    dest: '{{BUILD}}'
  },
  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;
}

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

Older posts...

Written by

Get in touch!

Notice any mistakes?
Leave me a message