mwaylabs / generator-m-ionic

Advanced workflows and setup for building rock-solid Ionic apps
MIT License
670 stars 133 forks source link

[SOLVED] How install font-awesome?! #532

Closed ghost closed 6 years ago

ghost commented 6 years ago

I tryed install font-awesome without success... i do this solution, https://github.com/mwaylabs/generator-m-ionic/issues/330, but This only works in web server gulp watch, when use in real device with command gulp --cordova "run android", not work.

network error

Path inside device:

path

Folder www/fonts after build/run android www-fonts-after-run-android

i maked a console.log in gulp / injection.js file, in 'bower-fonts' task, i noticed that fontFiles has only this fonts paths:

finded-fonts

j1cs commented 6 years ago

add this to bower.json:

  "overrides": {
    "font-awesome": {
      "main": [
        "less/font-awesome.less",
        "scss/font-awesome.scss",
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
       "fonts/fontawesome-webfont.svg"
      ]
    }
  }

and in main.scss $fa-font-path: "../assets/fonts";

ghost commented 6 years ago

SOLUTION:

First change the Ionic Style Source : https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/ionic_style_source.md

After this change, create a main.scss and import the Ionic-icons, ionic scss and finally font-awesome.

Like this:

// <my-main-module/folder>/main.scss 

$fa-font-path: "<path-to>/fonts" !default;
$ionicons-font-path: "<path-to>/fonts" !default;
@import "../../bower_components/ionic/scss/ionic";
@import "../../bower_components/font-awesome/scss/font-awesome";

This works for me in ionic server and build/run in real device (Android)