Using font-awesome in ionic 2

Question

How can i use fontawesome with ionic 2, i\'ve following this tutorial but it\'s not working.

Answer 1

Update in ionic 2 RC.0

• Download the font-awesome library.
• Create "fonts" folder in src/assets and copy the fonts from the font-awesome/fonts folder
• Copy the scss folder and paste it under src/theme/scss
• Open the variables.scss file, and copy the below code

@import "scss/font-awesome"; @font-face { font-family: 'FontAwesome'; src: url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

To include your icon in HTML

Ionic Beta

Install fontAwesome from the npm library.

Modify the below changes to your gulpfile.ts.

• Include gulp task for adding icon css and fonts to your build

gulp.task('myCss', function(){   
     return gulp.src('path-to-your-font-lib/style.css')
         .pipe(gulp.dest('www/build/css'))    
});  
gulp.task('myFonts', function(){   
    return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
         .pipe(gulp.dest('www/build/fonts'))    
});

• Modify your gulp build and watch task as follows (Adding your font and css on watch and build)

gulp.task('watch', ['clean'],  function(done){    
//existing ionic2 code 
} 
gulp.task('build', ['clean','myCss','myFonts'], function(done){   
//existing ionic2 code
}

Include @import "../../node_modules/font-awesome/scss/font-awesome"; in app.core.scss file

To include your icon in HTML