Tag: awesomeFonts

Ionicons are awesome, but sometime we need more. Then, awesomeFonts come to scene.

 

First, install font-awesome:

sudo npm install --save font-awesome

Then, in the project root, create a file called script/copy-custom-libs.js with:

const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
module.exports = Object.assign(existingConfig, {
    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'
    }
  }
);

Finally, in package.json add:

"config": {
  "ionic_copy": "./scripts/copy-custom-libs.js"
},

So, the next time you compile your project, the awesome-font will be in www/assets/

 

You can use this fonts in the side-menu:

    <ion-list>

      <ion-item menuClose ion-item class="franja_menu" (click)="irAPagina('InformacionPage')">
        <ion-icon class="fa fa-info icono_menu" item-start></ion-icon>
        INFORMACIÓN
      </ion-item>

      <ion-item menuClose ion-item class="franja_menu" (click)="irAPagina('EvaluarPage')">
        <ion-icon class="fa fa-pencil-square-o icono_menu" item-start></ion-icon>
        EVALUAR
      </ion-item>

      <ion-item menuClose ion-item class="franja_menu" (click)="irAPagina('ResultadosPage')">
        <ion-icon class="fa fa-bar-chart icono_menu" item-start></ion-icon>
        RESULTADOS
      </ion-item>

      <ion-item menuClose ion-item class="franja_menu" (click)="irAPagina('CuentaPage')">
        <ion-icon class="fa fa-cog icono_menu" item-start></ion-icon>
        CUENTA
      </ion-item>

    </ion-list>

Or, use it in the page header:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Mi Cuenta</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="salir()">
        <ion-icon class="fa fa-sign-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>