Error display font-awesome in ionic2

Ionic Framework ionic-v3
1

I try to install font-awesome in ionic 2 with this example:

  1. npm install font-awesome --save

  2. In package.json, add

“ionic_copy”: “./config/copy.config.js”,
“ionic_sass”: “./config/sass.config.js”,

  1. 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.include.push({
src: ‘{{ROOT}}/node_modules/font-awesome/fonts/’,
dest: ‘{{WWW}}/assets/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’;

but I have a problem in display of font-awesome on my page:

I copy fonts from node_modules/font-awesome/fonts to assets/fonts and also I copy all files from node_modules/font-awesome/scss to src/theme

How to resolve this error please?

2

the steps you are describing are related to including font-awesome 4.7, by doing npm install font-awesome you are installing I guess font-awesome >= 5 (which I think should not be imported the same way)

3

but version font-awesome installed is 4.7.0

4

You are right, they changed the name of font-awesome from 4.7 to 5

About your problem, I just noticed something, there is a . to much in the following variable

$fa-font-path: “…/assets/fonts”;

should be

$fa-font-path: “../assets/fonts”;

for the rest, looks good

I do like this and it looks the same Custom config not copying assets (font-awesome [scss])

1 Like
5

I would strongly recommend using v5 instead. It is so much easier to integrate. You don’t have to fool with any SCSS, font paths, custom build script modifications, or anything. All you have to do is add something along the lines of these three lines anywhere in your app TS:

import fontawesome from "@fortawesome/fontawesome";
import solid from '@fortawesome/fontawesome-free-solid';
fontawesome.library.add(solid as any);

The situation involving tree-shaking and including only the icons you want to use in your app bundle are in flux at the moment, so check back once 5.1 is released, but what you see above should get you the entire free solid pack in the current version as of now (5.0.8).

1 Like
6

Except if you are using/need fontawesome brands and ionic fab buttons, in such a case I would advice to don’t migrate becasue they are incompatible

1 Like