react-native-vector-icons icon indicating copy to clipboard operation
react-native-vector-icons copied to clipboard

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

Open meixiaoLi opened this issue 1 year ago • 4 comments

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.

meixiaoLi avatar Aug 11 '23 09:08 meixiaoLi

@meixiaoLi Downgrading to 9.2.0 worked for me.

swetankkk avatar Aug 13 '23 21:08 swetankkk

@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.

meixiaoLi avatar Aug 14 '23 08:08 meixiaoLi

Reproducing this as well

Mazztwo avatar Sep 08 '23 18:09 Mazztwo

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

meixiaoLi avatar Sep 11 '23 07:09 meixiaoLi