react-native-vector-icons Font Awesome 5 Pro icons not working

Question

I'm trying to use fontAwesome5Pro in react-native-vector-icons. Even the fontAwesome5 non-pro icons don't seem to be displaying. The older font awesome 4 icons display. I do have Pro version of fontawesome and I ran the command to automatically update my react-native-vector-icons to pro fontAwesome: ./node_modules/.bin/fa5-upgrade and entered my fontAwesome npm token. That part seems to have been successful.

I'm getting this error in the app:

The icons just show up as question marks.

Code:

import AwesomeIcon from 'react-native-vector-icons/FontAwesome5Pro'

<AwesomeIcon
     style={{
         marginLeft: 20
     }}
     name={'utensils'}
/>

I've put the icons into xCode:

I've got the Icons in the project as shown in VS Code:

The rnpm in package.json references the fonts:

I have changed 'react-native-vector-icons` from version 6.6.0 to version 6.3.0 because of this SO answer. But I still get the same error. What else can I check to get these font awesome pro icons working?

score 1 · Accepted Answer · answered Aug 12 '19 at 18:20

1

The fonts were not in info.plist

Solution: Add this to info.plist where the other fonts for the app are located.

<string>FontAwesome5_Pro_Solid.ttf</string>
<string>FontAwesome5_Pro_Brands.ttf</string>
<string>FontAwesome5_Pro_Light.ttf</string>
<string>FontAwesome5_Pro_Regular.ttf</string>

answered Aug 12 '19 at 18:20

BeniaminoBaggins

11,202
41
152
287

Thanks, but how can use ```Solid```or ```Regular```? Only shows light versions. – Vahid Alimohamadi Jan 01 '20 at 12:24
I found props. Regards. – Vahid Alimohamadi Jan 01 '20 at 12:25

score 1 · Answer 2 · answered Aug 21 '19 at 18:55

1

After updating the font, run react-native link to copy the fonts to the respective platform(ios/android)

answered Aug 21 '19 at 18:55

Galeel Bhasha

1,877
13
19

i don't do linking since i assume it was autolinking. your aswer remind me of this might because of autolinking . – Luiey Apr 19 '20 at 15:42

Mark Mu · Answer 3 · 2021-05-28T08:14:54.247

1

in my case, I fixed it by:

for ios:

the naming of "FontAwesome5Pro-Solid.ttf" (both add reference to Resources and add to info.plist)

for android the file naming should be "FontAwesome5_Pro_Solid.ttf" in assets/fonts

the naming is different but the doc never say that. btw, android must use real device, simulator does not render the fontawesome pro icons.

edited May 28 '21 at 08:14

answered May 28 '21 at 07:16

Mark Mu

21
2

Legend... Thank you. – hugger Sep 26 '21 at 23:07

score 0 · Answer 4 · edited Apr 14 '21 at 07:37

0

To use FontAwesome5Pro you should buy a licence.
You can use all free icons of FontAwesome5 by import down text:

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

Usage:

<FontAwesome5 name="youtube" size={60} />

edited Apr 14 '21 at 07:37

greybeard

2,249
8
30
66

answered Aug 11 '19 at 11:56

Hossein Arsheia

361
1
4
7

react-native-vector-icons Font Awesome 5 Pro icons not working

4 Answers4