IONIC2 | Font Awesome in Ionic2 app

abba Ionic2, Mobile App Leave a Comment

Make your IONIC2 apps stand out with Font Awesome

If you aren’t already using Font Awesome, you are missing out on using all the cool icons that are absolutely FREE. Icons are an important to ensure that your apps stands out among the millions of other apps on the Apple App Store or Google Play Store. Font Awesome gives you scalable vector icons that can be scale according to your requirements and easily styled with the power of CSS. You can find additional information about Font Awesome here.

This post will explain how to add Font Awesome to your IONIC2 apps. If you are not already developing with IONIC2, be sure to checkout the IONIC2.

This post is based on Ionic2 version : 2.0.0-rc.0.

This post uses the 2.0.0-rc.0 version of Ionic2, so make sure to update to 2.0.0-rc.0 version of Ionic2 as follows. Add the sudo keyword if the following installation fails.

Step 1: Install font-awesome module via the npm command. Add the sudo keyword if the following installation fails.

Step 2: We need to copy the files related to the Font Awesome to the appropriate folder. Be sure to read the documentation located here on how IONIC2 apps uses config files during build process. We are going to override the behavior of the Copy config. Create a copy of the copy.config.js from the IONIC githib repo and put in under your src folder in your IONIC2 project. There are several config files used, all of them can be found here.

Step 3: We are going to update the copy.config.js created in Step 2. Basically we are adding 2 source and destination directory for the Font Awesome fonts and CSS directories.

Step 4: Update package.json to add the following:

Step 5: Update src/index.html to add the following:

Step 6: Now you can start using Font Awesome in your template files as follows:

I am using WebStorm for my development and attached is the screen shot of the project structure the way it is set up.

Webstorm project structure

Other articles of interest