font awesome icons not showing up on ionic3 app

Question

I have implemented font awesome icons in my ionic3 app, but it does not show up. My ionic project environment details,

cli packages: (C:\Users\acer\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.8
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.4.0
    npm  : 5.8.0
    OS   : Windows 10

Misc:

    backend : pro

this is my intro.html file,

<ion-slides pager>
  <ion-slide style="background-color:yellow" >
      <i class="fas fa-utensils" style="font-size:120px;color:#ebebeb" aria-hidden="true"></i>
    </ion-slide>

  </ion-slides>

this is in my index.html file

 <!-- font-awesome -->
  <link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

I have already added following code, as many blog posts and SO answers suggested in my copy.config.js file

copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  },

check it https://stackoverflow.com/questions/47617601/font-awesome-installation-in-ionic-3-project — Utpaul, Apr 05 '18 at 16:36
@Utpaul i did that too mate, i saw it... later i gave up with font awesome icons and added ionic icons — AVI, Apr 06 '18 at 01:03
try `assets/css/font-awesome.min.css`. Remove the `/` in the url — Duannx, Apr 06 '18 at 01:53
To use font awesome in ionic already answered here, please go through with this [link](https://stackoverflow.com/questions/42747846/font-awesome-with-ionic2/47055657# ) — Suraj Bahadur, Apr 06 '18 at 04:31

score 1 · Answer 1 · answered Apr 05 '18 at 12:15

1

You have syntax error in linking stylesheet

<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

It should be

<link href="/assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

answered Apr 05 '18 at 12:15

Deepak Kumar T P

1,076
10
20

Can you check the status code for this file in networks tab – Deepak Kumar T P Apr 05 '18 at 12:18
If it is 404 then it is not loading stylesheet at all. You can also do one this use this link to check whether it is getting loaded http://localhost:3000/assets/css/font-awesome.min.css – Deepak Kumar T P Apr 05 '18 at 12:22
Inspect the element in browser and see styles are getting updated for fa – Deepak Kumar T P Apr 05 '18 at 12:25

score 1 · Answer 2 · answered Apr 05 '18 at 12:19

1

If you are linking a css-stylesheet its type should always be

type="text/css"

Change it from

<!-- font-awesome -->
<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/html">

to

<!-- font-awesome -->
<link href="/assets/css/font-awesome.min.css" rek="stylesheet" type="text/css">

answered Apr 05 '18 at 12:19

Nasiruddin Saiyed

1,438
1
13
31

yeah bro, i gave up on font awesome icons and added ionic icons :( ... thanks for help :) +1 – AVI Apr 06 '18 at 06:27
if i'll get time then ill make a demo and ill post a proper way ... :-) – Nasiruddin Saiyed Apr 06 '18 at 06:29

score 0 · Answer 3 · answered Jun 01 '18 at 10:57

0

I have faced this issue earlier. Resolved it by loading css file from below url instead of loading from assets.

answered Jun 01 '18 at 10:57

Sagar Kelkar

1
1

1

which url are you referring to? – Shivani Katukota Jun 01 '18 at 11:02

font awesome icons not showing up on ionic3 app

3 Answers3