How to use fontawesome in ionic 2 rc0?

Ionic Framework ionic-v3
2

I don’t use Ionic 2 but I use it in Ionic 1 without any gulp/grunt.

(Edit: I also found this thread - that may help you - maybe using gulp etc is a cleaner approach - but how I do it is what I’ve documented below)

I intall font awesome, then:
I simply include the font awesome CSS in my index.html like so:

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

In my master style.css I define a font awesome family like so:

@font-face {
    font-family: 'fontawesome';
    src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot');
    src: url('../lib/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../lib/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('../lib/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), url('../lib/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

And then whenever I need custom icons from font-awesome, I just use them like this

.icon-normal-speed:before {
    font-family: "fontawesome";
    content: "\f1b9";
}

And to use them in my template, its just like the normal way with the <i class="icon-normal-speed"></i> approach

Hope this helps

2 Likes