Upgraded to 6.0.1 and icons turned into question marks

[dayhaysoos]

I just upgraded to 6.0.1, I downloaded the extra set of files, like fa-brands-400.eot and .tff etc etc

Ran react-native link react-native-fontawesome

closed simulator and react-native run-ios

I am trying to use the Twitter, Twitch and Discord icons. Twitter and Twitch were working just fine before the update, now they are all showing up as question marks.

I went to look at the references/dependencies in Xcode and everything is there just fine. Any ideas?

Thanks in advanced!

[leandrosimoes]

Did you check if you are using the correct IconTypes enum such as IconType.FAR, IconType.FAS or IconType.FAB ?

[eathentica]

Hi,
I have almost the same problem. My icons are not question marks but some kind of cross marks.

Here is my build.gradle
buildscript {
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1"
googlePlayServicesVersion = "16.0.0"
androidMapsUtilsVersion = "0.5+"
}
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'
classpath 'com.google.gms:google-services:4.0.1'
}
}

allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
url "$rootDir/../node_modules/react-native/android"
}
maven {
url "https://maven.google.com"
}
}
}

task wrapper(type: Wrapper) {
gradleVersion = '4.4'
distributionUrl = distributionUrl.replace("bin", "all")
}

I have to go back to 0.57.4 to get it works.
Did I miss out something?

Thanks in advanced!

[leandrosimoes]

Hi,
I have almost the same problem. My icons are not question marks but some kind of cross marks.

Here is my build.gradle
buildscript {
ext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1"
googlePlayServicesVersion = "16.0.0"
androidMapsUtilsVersion = "0.5+"
}
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'
classpath 'com.google.gms:google-services:4.0.1'
}
}

allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
url "$rootDir/../node_modules/react-native/android"
}
maven {
url "https://maven.google.com"
}
}
}

task wrapper(type: Wrapper) {
gradleVersion = '4.4'
distributionUrl = distributionUrl.replace("bin", "all")
}

I have to go back to 0.57.4 to get it works.
Did I miss out something?

Thanks in advanced!

Hi! Can you provide the code part where you are setting the icon?

[eathentica]

I use FontAwesome everywhere in my code.
In Version 0.57.4, for example:
{Icons.chevronLeft}

And it will appear as followed:

In Version 6.0.1
{Icons.chevronLeft}
And here is how it looks like:

The action buttons on right bottom display correctly, because I use "react-native-vector-icons" there.

I have delete the build folder, clean, rebuild. It did not help. The use of IconType.FAR also does not work.

iOS has no problems!

Best regards,
Eathentica

[leandrosimoes]

@eathentica check your font files names and see if they are matching this patterns:

fa_brands_400.ttf
fa_regular_400.ttf
fa_solid_900.ttf

If not, change them to match exactly as that, because a few versions behind, the font files in fontawesome, had the names separated with underlines, but now, the font files are separated with dashes. I already open a PR to change the Icon.js to match dashes instead underlines, but the PR wasn't merged yet as you can see here: #52

[eathentica]

Hi, I have a look at the assets. There are the following files:
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf

How do I change their names?
Best regards,
Eathentica
www.eathentica.com

[leandrosimoes]

@eathentica Just change the file name, Android considers the file name and not the font family. You can remove the FontAwesome.ttf file too and let just the other three files, brands, regular and solid.

[eathentica]

Sorry, but I still do not understand what you meant.
FontAwesome.ttf ---> ?
FontAwesome5_Brands.ttf ---> fa_brands_400.ttf
FontAwesome5_Regular.ttf ---> fa_regular_400.ttf
FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

Or do I miss something here?

[leandrosimoes]

FontAwesome.ttf ---> ?
FontAwesome5_Brands.ttf ---> fa_brands_400.ttf
FontAwesome5_Regular.ttf ---> fa_regular_400.ttf
FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

Exactly, delete the FontAwesome.ttf file and change the other file names like this:

FontAwesome5_Brands.ttf ---> fa_brands_400.ttf
FontAwesome5_Regular.ttf ---> fa_regular_400.ttf
FontAwesome5_Solid.ttf ---> fa_solid_900.ttf

[rgordon95]

const IconTypes = {
FAR: Platform.OS === 'ios' ? 'FontAwesome5FreeRegular' : 'fa_regular_400.ttf',
FAS: Platform.OS === 'ios' ? 'FontAwesome5FreeSolid' : 'fa_solid_900.ttf',
FAB: Platform.OS === 'ios' ? 'FontAwesome5BrandsRegular' : 'fa_brands_400.ttf'
}

did not work for me either...

what you must do is download the FA files for desktop and include them within your android package in android/app/src/main/assets/fonts and rename them as advised above (i used .otf like fa_regular_400.ttf)

[rajuashok]

@eathentica check your font files names and see if they are matching this patterns:

fa_brands_400.ttf
fa_regular_400.ttf
fa_solid_900.ttf

If not, change them to match exactly as that, because a few versions behind, the font files in fontawesome, had the names separated with underlines, but now, the font files are separated with dashes. I already open a PR to change the Icon.js to match dashes instead underlines, but the PR wasn't merged yet as you can see here: #52

This worked for me. Please update your repo's readme with proper files. This link gives files with dashes instead of underscores: https://github.com/FortAwesome/Font-Awesome/releases/download/5.4.1/fontawesome-free-5.4.1-web.zip

[deeuu]

Same for me...hyphen->underscore substitution is necessary.

Please update readme or review the PR.

[leandrosimoes]

I created a PR that solves this issue with hyphens: #61

[rgordon95]

I would suggest just using react-native-elements or native base as it has better support for FA FA5 and many other icon libraries in one dep.

[leandrosimoes]

I agreed with @rgordon95 about using other alternatives than this repo, because I think that any maintainer is looking for this anymore since FontAwesome/react-native-fontawesome, that I'm using for new projects by the way. I just created this PR because I have some legacy projects that I'm using entria/react-native-fontawesome and I just couldn't change the package right now.

[dayhaysoos]

Switching to FontAwesome/react-native-fontawesome solved my issue