1. Home
  2. Forum
  3. Xamarin.Forms
  4. Font Icon on iOS not rendering

Font Icon on iOS not rendering

Hi!

I am using SfTabView and SfTabItem in my app and facing an issue with setting of Font Icons in iOS. Its working fine in android but on iOS its showing a question mark in a rectangle. I have seen your example attached in this thread and in my view, things appear to be same. Following are the steps I have taken, if something is missing, please tell me. 
1. Set up the FontIconFontFamily to file name i.e. line_awesome (without .ttf)
2. Have added the file in Resources of iOS set build action as "BundleResource" and copy to output directory as "Do Not Copy". (Have tried with Copy always too)
3. Have set up the UIAppFonts key in Info.plist and have set up the array value with string of font file name. 

I have attached the screenshot of output. 

Thanks,
Nitish

Attachment: Screen_Shot_20180604_at_2.23.18_PM_9a8067c8.zip

7 Replies
VA Vinnalan Aravazhi Syncfusion Team June 5, 2018 12:24 PM UTC

Hi Nitish,

Thanks for contacting Syncfusion support.

Query: Font Icon on iOS not rendering

We have checked the reported issue from our side. We have created a sample of Font Icon. Please find the sample and screenshot from below link.

Sample: http://www.syncfusion.com/downloads/support/forum/137945/ze/TabViewFontSample1562681478 

Please make sure that you have setting value for font icons as mentioned in *.ttf. Please follow the following steps for setting of Font Icons in iOS.

https://help.syncfusion.com/xamarin/sftabview/display-type#how-to-set-and-customize-the-font-icons-appearance-in-the-header

So, could you please provide the mentioned details.

1) On which iOS version and device model could you reproduce the reported issue

2) Send the code snippet which you used.

This will help us to find appropriate solution for this.

Regards,
Vinnalan K A.  


NK Nitish Kumar Sharma June 5, 2018 02:28 PM UTC

Hi Vinnalan!

Thanks for the reply. As I mentioned in the question I have already seen that sample app you shared in one of your thread replies. I have also gone through the steps provided in the documentation. 

I am seeing the error on iOS Simulator which is running iOS 11.3 and on a device which is running the same version of iOS. I have created a sample app with all the stuff configured same as I have in my main app and you can run it and reproduce the error. In the archive, you can also see the screenshots for both android and iOS.

Thanks,
Nitish

Attachment: SfTabViewFontIcon_e52f91c.7z

RB Rabhia Beham Kathar Mideenar Syncfusion Team June 6, 2018 12:58 PM UTC

Hi Nitish,

We have checked the sample provided and have modified the the Font Icon Naming in the sample. Please give the name as in the screenshot provided. Please have the modified sample and screenshot.

Sample Link: http://www.syncfusion.com/downloads/support/forum/137945/ze/SfTabViewFontIcon_2-1991098478 

Please let us know if you have any concern.

Regards,
Rabhia Beham K. 


NK Nitish Kumar Sharma June 6, 2018 05:38 PM UTC

Perfect. Thanks. It is working. It would be helpful to others too if this info can be added in documentation.

Thanks,
Nitish

RB Rabhia Beham Kathar Mideenar Syncfusion Team June 7, 2018 05:29 AM UTC

Hi Nitish,

We are glad that you have achieved your requirement. We have already planned to add the details in the UG Documentation.

Regards,
Rabhia Beham K.

JH Jaja Harris June 28, 2018 09:22 PM UTC

I was experiencing the same problem as Nitish, in order for me to get it to work I had to do the steps below.  Just fyi, my ttf filename was TabIcons.ttf and I am using VS for Mac.
  1. Added the font file with the following build action: BundleResource.
  2. Double-click the Info.plist file; go into the source view by clicking on the source tab; click + symbol to add new entry; click drop-down and select "Fonts provided by application"; add entry using filename of the ttf file - for me I entered TabIcons.ttf.
  3. Now open your ttf file in FontBook by double-clicking the ttf file in Solution Explorer.  The FontBook application should launch and a dialog window will display and you should see your icons (see attached screenshot).
  4. Take note of the filename displayed in the dialog's title bar - that is the filename you will need to use in your code.  
  5. Please note that the name in the dialog's title bar may be different than the actual filename.  
  6. The name in the dialog window for my ttf file was actually "untitled-font-1" and NOT "TabIcons" as I expected it to be.  
  7. Once I used "untitled-font-1" in the XAML my icons displayed as expected.  Before I kept trying to use "TabIcons" in the XAML since the filename was actually "TabIcons.ttf" and it never worked.  
If anyone knows how to alter the ttf file so that the names match I would appreciate you sharing how to do it cause it's not exactly obvious to me how to do so.

Hope this helps!


Attachment: ttf_dialog_673e47d6.zip

VA Vinnalan Aravazhi Syncfusion Team June 29, 2018 10:16 AM UTC

Hi Jaja,

Thanks for contacting Syncfusion support.

Query: If anyone knows how to alter the ttf file so that the names match.

We have checked your requirement from our side. ttf file name has to be altered while creating the file. Please find the video which demonstrates how to alter the ttf file name.

Video: http://www.syncfusion.com/downloads/support/forum/137945/ze/TabViewFontVideo-1124119200 

Please let us know if you have any other queries.

Regards,
Vinnalan K A.  


Loader.
Up arrow icon