How to install font awesome in ionic and Font to Ionic

The ionic framework has lots of free and premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open-source built by the Ionic Framework team. If you still want to use font-awesome in ionic, then let’s implement and use font-awesome in the Ionic project. The font-awesome is a toolkit for web and mobile applications that provides icons and social logos.

Font Awesome is a font and icon toolkit based on CSS and Less and it was used with Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome 6 is the next version that is planned to release in the second half of 2020. 

In this article, we’ll explore how to use font awesome in ionic and will demonstrate how to apply different colors and sizes on font awesome icon in our ionic application. Let get started.

Installing the Ionic CLI
If you have not yet installed an Ionic CLI on your system. Then we need to install an Ionic CLI first. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. In our previous articles, we have discussed how to install Ionic and fix npm permission. To install the Ionic CLI, open a terminal, and run the following command:

npm install -g @ionic/cli

Setting up Ionic Font awesome

Make sure you must have the latest version of Ionic CLI installed on your system. With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s create Ionic apps and install the font-awesome library.

ionic start fontAwesomeApp blank --type=angular
npm i @fortawesome/fontawesome-free --save

Configure font awesome in Ionic

After installing the plugin, we have to add font awesome CSS, and js links in angular.json

"styles": [
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  },
  {
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
  }
],
"scripts": [
  {
    "input": "node_modules/@fortawesome/fontawesome-free/js/all.js"
  }
]

Example of font-awesome in ionic

Once we have configured the setting of adding font-awesome in our application. Let’s add a few font awesome icons with different colors and sizes to our home.page.html template. The font awesome icon using font awesome library allows us to add a few attributes like size, rotate, and spin. We can use this attribute to change the font awesome style also.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic  Font awesome
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-grid>
      <ion-row>
        <ion-col col-sm="4">
          <span style="font-size: 3em; color: Tomato;">
            <i class="fas fa-clock"></i> Clock
          </span>
        </ion-col>
        <ion-col col-sm="4">
          <span style="font-size: 48px; color: Dodgerblue;">
            <i class="fas fa-camera"></i> Camera
          </span>
        </ion-col>
        <ion-col col-sm="4">
          <span style="font-size: 3rem; color: Mediumslateblue;">
            <i class="fas fa-coffee"></i> Coffee
          </span>
        </ion-col>
      </ion-row>
    </ion-grid>
    <p>FontAwesome in ionic 5</p>
    <ul style="list-style-type:none;">
      <li><i class="fas fa-check"></i> Check</li>
      <li><i class="fas fa-spinner" spin="true" size="3x"></i> Spinner</li>
      <li><i class="fas fa-envelope" rotate="90"></i> Envelope</li>
    </ul>
  </div>
</ion-content>

How to add a font in Ionic Apps

In this example, we will take a font from Google fonts. Create a folder called fonts in the assets folder and save the font with formats woff2. In-app folder, we have to file app.scss and add the following code in app.scss

@font-face {
    font-family: 'Open-Sans';
    src: url('../assets/fonts/open-sans.woff2') format('woff2');
}

*{
    font-family: Open-Sans;
}

Conclusion
Finally, we have completed our tutorial on how to install and use font awesome in Ionic with an example. There are lots of ways to add font-awesome in ionic applications and we have used fortawesome. The downside of fortawesome/fontawesome-free library is the size of the package is 11.8 MB.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use the ionic skeleton component.
• How to create a different ionic list.