Extend ionic / add custom fonts/icons (ionic.config.json)

Ionic Framework ionic-v3
21

Yes, it’s always an option to copy the font-awesome’s files in the /src/assets directory. But I would like to know how to use it as npm package instead, because I would not like to mix my own code with library code and I would like to manage it via npm and update it easier.
At this point it’s still not clear to me if there’s a way to do it, because the gulpfile.js is removed from the new build process and there are no overridable configurations of the new build tasks at project level.

3 Likes
22

Just figured this out for the Ionic 2 Release Candidate:

2 Likes
23

@pdrosos did you mind a way? I wasn’t able to do it.

@scottlott thanks for the link. I tried doing it this approach. copy everything you had but it didn’t work.

Did anyone get @scottlott example to work?

24

Arcen, could you paste in the error message you’re getting?

You do need to have fs-extras installed, so try running this command:
npm install --save fs-extra

25

@scottlott Not getting an error. After following the steps i wasn’t able to use font-awesome. is there another step i might have been missing?

26

The only other thing you have to do is make sure Font Awesome is linked in your HTML file. Inside your header on src/index.html:

<link href="libs/fa/font-awesome.min.css" rel="stylesheet"/>

1 Like
27

@scottlott Nice! TY it worked. Can’t believe i forgot to add the link lmao

28

This worked well for me.

29

Thanx, I use this because ionic scripts in rc0, rc1 are not yet stable…

30

Thanks Behnamazimi…it works for me. However, fonts being copied to www/assets/fonts folder have zero sizes. I had to copy the files manually. Could this have any thing to do with the watch script? If so, how can we fix it?

Thanks

31

Hello @tim,

Awesome answer, I’d like to know if there are a limited fonts that can be added in a project this way. I’m adding some fonts to my project that I don’t think they are in that list. How am I supposed to add them to my project? I see there are still not enough documentation for that.

How am I able to import that typography?

32

I was struggling with font-awesome as well… if anyone is on RC4 and still having trouble there’s a great tutorial at http://chriztalk.com/ionic-2-font-awesome/

3 Likes
33

Thanks, this works for me!

34

Thanks,this works for me…

35

It works but with some quirks. I´ve downloaded the package from fontawesome.io:

  • I had to paste all the sass imported by font-awesome.scss
  • There is a conflict with the existing variables.scss so i’ve to rename it to variables-fa.scss and
  • Edit to @import "variables-fa" inside font-awesome.scss 
Cordova CLI: 7.0.1
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
36

@iignatov This worked like a charm for me ! Thank You guys !!