oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.31k stars 2.12k forks source link

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 10 months ago

meixiaoLi commented 10 months ago

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 commented 10 months ago

@meixiaoLi Downgrading to 9.2.0 worked for me.

meixiaoLi commented 10 months ago

@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 commented 9 months ago

Reproducing this as well

meixiaoLi commented 9 months ago

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