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

Good evening my friend, I managed to make it work. I removed the lines you listed, deleted the build folder, then run the ionic serve command again. The gulp could import sources to the folder just right. Now I will try to make the import of icomoon.

Thanks a lot for the help.

1 Like

I followed the same steps, but using other type of font (google maven), which is local under my app folder. I then copied all the fonts with the gulp task to www/build/fonts.

In the app.variable I tried to set $font-family-base to have my custom font name.

When I run the app and debug it, my custom font is there, but current font-family is still the old one.

Any clue?

Hi,

@tim @brandyshea
the projects, generated with the new ionic-cli 2.1, using ionic 2.0.0-rc.0 do not have gulpfile.js anymore. What is the way to add custom fonts and icons now?

I must use both font-awesome and other custom fonts in my application, so it’s really important to know how to do it with the new build process.

Thanks!

Edit: I found out that everything from the src/assets/ directory is already configured to be copied in the www/assets/ directory, so custom fonts can be just dropped there and referenced from the scss file.
Still wondering how to use fonts and scss from external libraries, installed with npm, like font-awesome.

1 Like

I do like this:

  1. Copy/paste font-awesome files (.ttf, .woff, .woff2) to src/assets/fonts directory.

  2. Copy/paste font-awesome.scss to src/theme of your app.

  3. Open font-awesome.scss and add below font-face instead of exist:

    @font-face {
    font-family: ‘FontAwesome’;
    src: url(‘…/assets/fonts/fontawesome-webfont.eot?v=4.6.3’);
    src: url(‘…/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3’) format(‘embedded-opentype’), url(‘…/assets/fonts/fontawesome-webfont.woff2?v=4.6.3’) format(‘woff2’), url(‘…/assets/fonts/fontawesome-webfont.woff?v=4.6.3’) format(‘woff’), url(‘…/assets/fonts/fontawesome-webfont.ttf?v=4.6.3’) format(‘truetype’), url(‘…/assets/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

Notice: Your font-awesome version might be different from 4.6.3, so check it before copy!

  1. Open variables.scss file which is in the src/theme and import font-awesome like below:

@import "font-awesome";

  1. Done! :relaxed: You can use font-awesome classes in your app like below:

<ion-icon class="fa fa-heart"></ion-icon>

7 Likes

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

Just figured this out for the Ionic 2 Release Candidate:

2 Likes

@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?

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

@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?

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

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

This worked well for me.

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

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

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?

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

Thanks, this works for me!

Thanks,this works for me…

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

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