Using font-awesome in ionic 2 - icons

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
<i primary class="fa fa-cart-plus fa-lg"></i>
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
<i primary class="fa fa-cart-plus fa-lg"></i>

Answer 2

font-awesome ionic 2 integration only with configuration files.
Download font-awesome via npm (npm install font-awesome --save)
In the file package.json from your project add this:
"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map",
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js"
}
On the root folder of your project create config folder and copy the files copy.config.js and sass.config.js (this files are located in (..\node_modules\#ionic\app-scripts\config)
Modify the copied files. In sass.config.js add the reference to font-awesome,
at the end verify that you have something like this
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'node_modules/font-awesome/scss'
],
The most important part here is the last line.
in copy.config add this:
copyFontAwesome:{
src: 'node_modules/font-awesome/fonts/',
dest: '{{WWW}}/fonts/'
}
The most important part here is dest '{{WWW}}/fonts/' and not {{WWW}}/assets/fonts/', it because font-awesome.css search fonts in "www/fonts" file.
And finally add #import "font-awesome"; in variables.css (src\theme folder)
After perform all this steps you can use font-awesome in your ionic 2 project.
<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>
It's all

Answer 3

Similar Approach as #Edward suggested, but a bit cleaner way to do this would be
1) npm install font-awesome --save
2) In package.json, add
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js",
3) Create the below files at root level of your project and add following content.
In the file: ./config/copy.config.js
Add
const copyConfig = require('../node_modules/#ionic/app-scripts/config/copy.config');
copyConfig.copyFonts.src.push('{{ROOT}}/node_modules/font-awesome/fonts/**/*');
In the file: ./config/sass.config.js
Add
const sassConfig = require('../node_modules/#ionic/app-scripts/config/sass.config');
sassConfig.includePaths.push('node_modules/font-awesome/scss');
4) In ./src/theme/variables.scss
$fa-font-path: "../assets/fonts";
#import 'font-awesome';

Answer 4

There is still a lot of confusion on what is a best practice when it comes to adding FontAwesome to an ionic2 app. I wrote a tutorial about it to mitigate some of that confusion. I hope this helps anybody else out there looking for this info
http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Answer 5

I tried most of the answers above but they were either too complicated or had a limitation when the core of Ionic2 was upgraded so here is my solution:
It requires manually upgrading of FA when a new version comes out but I don't need to upgrade often as I only use a few select icons.
Ignore the SASS files and copy the contents of \node_modules\font-awesome\fonts to \src\assets\fonts. Also copy \node_modules\font-awesome\css\font-awesome.min.css to the same place.
Reference the csss in your index.html file like this:
<!--Custom Fonts-->
<link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
<link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
<link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />
Then to use it, put this into the page's scss:
.logo-text {
font-family: 'comfortaa-bold';
}
and this in the html:
<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>
And that should be it...

Answer 6

Update for Ionic 2, Ionic 3+: just one step:
Add font-awesome link to your index.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">