Adding the Font-awesome and Font to Ionic

To install the font-awesome, we have to follow certain step

  1. npm install –save font-awesome
  2. Open index.html of root folder, add following code in <head>
      <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
  3. Adding a custom copy script,  Copy the file copy.config.js file and past in new location config in the root folder. 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 to

    node_modules

    the www folder,

  4. Rename the copy.config.ts to copy-custom-libs.js: append the following code along with existing code at the end.
    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'
      },

     

  5. 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 We can restart our apps, we can use font-awesome in our apps.
        },
        "config": {
            "ionic_copy": "./config/copy-custom-libs.js"
        },
        "dependencies": {

 

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 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;
}