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 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
font awesome in ionic example
Adding the Font awesome in Ionic

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 add a few font awesome icons with different colors and sizes in our home.page.html template. The font awesome icon using fortawesome 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

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top