Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Font Awesome 5 Pro icons to ios results in the display of question marks instead of the intended icons with "IconExplorer" example #1542

Open
meixiaoLi opened this issue Aug 11, 2023 · 4 comments

Comments

@meixiaoLi
Copy link

meixiaoLi commented Aug 11, 2023

I am encounting a problem with Font Awesome 5 Pro icons in ios, where the icons are being displayed as question marks. to reproduce the issue follow these steps.

  1. clone the vector icons project "https://github.com/oblador/react-native-vector-icons.git" repository using the provided example "iconExplorer"
  2. inside Xcode, create a new folder named "Fonts" under the "iconExplorer" target and place Font Awesome 5 Pro TTF files within this folder. this action will result in the files being added to the "Copy bundle resources" in the "Build Phases".
  3. Added the fonts name into info.plist.
  4. Rebuild the Pod in the IOS folder by executing "pod install" and then launch the project in Xcode.

Result:
All vector icons provided as default are working correctly - and Font Awesome Pro Icons are not displaying Properly.
The icons

Working perfectly on Android default icons and Font awesome 5 pro.

@swetankkk
Copy link

@meixiaoLi Downgrading to 9.2.0 worked for me.

@meixiaoLi
Copy link
Author

meixiaoLi commented Aug 14, 2023

@meixiaoLi Downgrading to 9.2.0 worked for me.

Thanks for your response mate :).

I managed to get it to work by modifying the 'create-icon-set-from-fontawesome5.js' file
(node_modules/react-native-vector-icons/lib/create-icon-set-from-fontawesome5.js)

Since I'm only using the Pro version, I made a change to line 42. Specifically, I changed the line from:

Original: FontFamily: ${family}-${styleName}

To: New: FontFamily: ${family}${styleName}

This adjustment was necessary because the postScriptName of these TTF files (from FontawesomePro) doesn't include a hyphen (-). (I discovered the postscript name by drop my TTF file to fontdrop.info)

Please note that I made these changes within the 'node_modules' directory. This means that the next time I perform a 'yarn install' or 'npm install' , these modifications will be overwritten. For me, this is just a temporary solution.

@Mazztwo
Copy link

Mazztwo commented Sep 8, 2023

Reproducing this as well

@meixiaoLi
Copy link
Author

Reproducing this as well

Hello mate,

I upgraded from FontAwesome 5 Pro to FontAwesome 6 Pro and changed the required icon names I used to the V6 names.
everything works fine in V6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants