Hi,
I would like to use Font Awesome 5 in Ionic 3.9.2 project, how i can achieve this ?
I use npm package of FA and i know i need to use a webpack.config.js, but don’t know how override the existing config.
Regard Alex
1 Like
I don’t like this type of behaviour, when i see this type of comment i really don’t want to contribute to this community, i prefer any response instead of that.
The point is who to integrate FA 5 with a simple configuration of webpack, why pass by an another dependency just to use some font ? Maybe i missing something, but in this case explain, that might be usefull for anothers persons.
Regards Alex
I don’t know why but i used the fallowing but it shows error.
https://charlouze.github.io/ionic/2017/05/31/Ionic-3-and-Font-Awesome.html
You ask simething that already have been explicated and foundable by googling the question…
So that are the answers your topic deserve
That’s annoying to see topics like yours the whole day.
Have you tried using angular-fontawesome?
Firstly, use angular-fontawesome as suggested above. For anyone interested in an alternative, you can try the below, just note your app will be a few MB bigger.
You can download FA5 using npm into you project’s node modules folder.
npm i @fortawesome/fontawesome --save
Then, you can copy the webfonts using config files
/config/copy.config.js
var copyConfig = require(’…/node_modules/@ionic/app-scripts/config/copy.config’);
copyConfig.copyFonts.src.push(’{{ROOT}}/node_modules/@fortawesome/fontawesome-pro-webfonts/webfonts/**/*’);
/config/sass.config.js
var sassConfig = require(’…/node_modules/@ionic/app-scripts/config/sass.config’);
sassConfig.includePaths.push(‘node_modules/@fortawesome/fontawesome-pro-webfonts/scss’);
Import fontawesome into your variables.scss
$fa-font-path: “…/assets/fonts”;
@import “fontawesome”;
Then you can use as normal:
font-family: ‘Font Awesome 5 Free / Pro’;
Hope that helps you out.
One more thing, if you don’t have those config files already, an extra step is required.
In your package.json, you need to add
“config”: {
“ionic_copy”: “./config/copy.config.js”,
“ionic_sass”: “./config/sass.config.js”
},
Warning: following any of the advice in the previous two posts will seriously bloat your app binary.
True, about 5MB worth of fonts if you use the all the variants. However the angular package is ‘coming soon’. I’ll switch when that is updated and suggest that when its ready for production.
Cool! Something new to play with 
Hopefully it supports the pro version
1 Like
It does. I would still recommend using explicit imports, such as:
import {faClock} from "@fortawesome/pro-light-svg-icons/faClock";
Exciting, I use Font Awesome heavily in a few apps, this has made my day!
Thanks everybody for this informations, i’m now aware the impact to import font awesome into sass. 
@media4learning I’m still not able to set font awesome icon with my Ionic 3 app. Please help me.
Here Desc:
in my sass.config.js
module.exports = {
includePaths: [
‘node_modules/ionic-angular/themes’,
‘node_modules/ionicons/dist/scss’,
‘node_modules/ionic-angular/fonts’,
‘node_modules/font-awesome/scss’
]
};
in copy.config.js
module.exports = {
copyFontAwesome: {
src: [’{{ROOT}}/node_modules/font-awesome/fonts/**/*’],
dest: ‘{{WWW}}/assets/fonts’
}
}
package.json
“config”: {
“ionic_copy”: “./config/copy.config.js”,
“ionic_sass”: “./config/sass.config.js”
}
tabs.html
<ion-tabs selectedIndex=“1”>
<!-- <ion-tab [root]=“tab1Root” tabTitle=“My Cards” tabIcon=“ios-medical-outline”></ion-tab> -->
<i class=“fas fa-prescription-bottle-alt”></i>
<ion-tab [root]=“tab2Root” tabTitle=“Search” tabIcon=“search”></ion-tab>
<ion-tab [root]=“tab3Root” tabTitle=“Profile” tabIcon=“ios-settings-outline”></ion-tab>
</ion-tabs>
while Search & Profile icon is showing but not first icon
Read the thread and use <fa-icon>. There is no need to mess with SASS or custom build configurations.
@rapropos I’ve used the same but still icon is not showing… Please help me
1 Like
For those who also stuck in importing FontAwesome with Ionic 3+ this is the way I do it:
I just download the pkg from the FontAwesome site, and then:
- In the src/assets I created a folder “fontawesome-$verion’”
- Inside the folder I move the css files: fontawesome.min.css/solid.min.css/brands.min.css into dir: src/assets/fontawesome-$verion/css
- Then I move the webfonts folder into: src/assets/fontawesome-$verion/webfonts
The Ionic webpack will automatically copy this folder & files to www/assets/…
So I just add those files in index.html
<link href="assets/fontawesome-5.7.2/css/fontawesome.min.css" rel="stylesheet">
<link href="assets/fontawesome-5.7.2/css/solid.min.css" rel="stylesheet">
<link href="assets/fontawesome-5.7.2/css/brands.min.css" rel="stylesheet">
And that’s it.
No imports, no related version stuff, no nothing.
Problem with the AngularFontAwesome pkg - is that it’s supporting Angular 6+ … so you might install everything and all imports will work, but then you’ll receive some bizarre error in the UI’s console about $(obj)... something
1 Like
Hello @Arlevi , I am trying to integrate ngx-sharebuttons that’s using font-awsome and the icons are not showing . i tried integrating fontawesome by installing it and editing the ./config/copy.config to copy the fonts from the @ng-modules to www/fonts , added it to the package.json still nothing is being copied . i see that you are adding a link to the assets how did you get the css files in there ?
You just download the package from font-awesome, than copy the files to the src/assets folder as I mentioned above: https://fontawesome.com/start -> choose “Download” ( not NPM or any other package ) unzip it, and copy what you need to src/assets