1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to specify SfTabItem.IconFont property values

How to specify SfTabItem.IconFont property values

Hello,

I am experimenting with the SfTabView control, using the sample code from SampleBrowser, but I have been unable to find an efficient way to specify the font glyphs that should be used as SfTabItem icons.

The sample application specifies icon glyphs using the text characters that correspond to the Unicode glyph codes in the associated ttf file.

For example, the sofa icon in the TabIcons.ttf file has a Unicode glyph code of \u0041, which usually represents text character A.

So, this can be specified in XAML as follows:

     <tabView:SfTabItem IconFont="A" FontIconFontFamily="TabIcons.ttf#"TabIcons></tabView:SfTabItem>

This approach is OK when a required icon glyph nicely maps to a printable character.

However, I am not sure how I can make it work in a real-world app that uses an icon library such as FontAwesome, in which each glyph has a name and a Unicode glyph code, but neither of them seem to be recognized by SfTabItem.

Here are some of the things that I have tried:

[a] Specify the Unicode glyph code as an XML-escaped value directly in XAML (doesn't work):
     <tabView:SfTabItem IconFont="&#0041;" FontIconFontFamily="TabIcons.ttf#"TabIcons></tabView:SfTabItem>

[b] Specify the glyph by its name, as defined in the font file (doesn't work):
     <tabView:SfTabItem IconFont="sofa" FontIconFontFamily="TabIcons.ttf#"TabIcons></tabView:SfTabItem>

[c] Bind the IconFont property to a view model property that returns the character to be rendered (doesn't work):
     <tabView:SfTabItem IconFont="{Binding SofaGlyph}" FontIconFontFamily="TabIcons.ttf#"TabIcons></tabView:SfTabItem>
And then, in the view model ...
     public char SofaGlyph => Convert.ToChar(0x0041);

The icon support in SfTabView looks great, but I am not clear how to make it play nicely with the many popular font icon libraries.

Can you please tell me what I am doing wrong? Many thanks in advance.

13 Replies
MS Mugundhan Saravanan Syncfusion Team May 29, 2018 07:07 AM UTC

Hi Tim Coulter,

Thanks for contacting Syncfusion support.

We have checked the reported requirement “How to set Tabitem.IconFont property value”. For IconFont property we must set the text character or textcode value, we can’t directly give the glyph name. We have created a sample based on your requirement and using the glyph code for Iconfont property. Please have the sample from the following link

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewFontSample192389450
 
  
Generally, Adding own font icon library means you need to add the .ttf in the Assets folder. please check the following link for how to add the font icon family for reference

Link: https://help.syncfusion.com/xamarin/sftabview/display-type

Please let us know if you have any other concern.

Regards,
Mugundhan S.
 


TC Tim Coulter May 29, 2018 07:35 AM UTC

Hi Mugundhan S,

Thank you for researching this problem. Your solution works perfectly!

I would recommend that you update your documentation to include an explanation of how your font icon implementation works. It is very powerful, but it is not obvious how to use it.

Thanks again,
Tim

MS Mugundhan Saravanan Syncfusion Team May 30, 2018 07:22 AM UTC

Hi Tim Coulter,

Thanks for your update.

We will add information about how to add a font icon as step by step in the UG Documentation. This will be included in our next volume 2 SP-1 release which will be rolled at end of June month.

Regards,
Mugundhan S.

DE DevOxando July 17, 2018 02:23 PM UTC

A link to the docu would be good.
I have the same issue now

PA Paul Anderson S Syncfusion Team July 18, 2018 04:09 AM UTC

Hi Phil, 
 
Thanks for the update. 
 
We have already processing the documentation including the detailed explanation for adding the Font Icons in TabView and it will be published by the end of this month [July 2018]. Please make use of the sample provided with this forum and let us know if you face any issues in acheiving your requirement. 
Regards, 
Paul Anderson 


IO IoTFier October 2, 2018 08:03 AM UTC

Hi Mugundhan and Paul, 

1> Can you please share with me the document link that covers the details as mentioned by you in this thread?
2> Also, I was wondering if the option of providing (non-hex value) the icon name could be supported.
     e.g. in the pic below the IconFont will be "fa-search" 

     

Thanks

MS Mugundhan Saravanan Syncfusion Team October 2, 2018 02:14 PM UTC

Hi Sadhik,

Query 1: ” Can you please share with me the document link that covers the details as mentioned by you in this thread?”

Please have the UG-Documentation from the following link

Link: https://help.syncfusion.com/xamarin/sftabview/display-type  

 Query 2 : “ Also, I was wondering if the option of providing (non-hex value) the icon name could be supported”

Sorry for inconvenience.

We cannot clearly understand,Could you please provide more details about this requirement which provide appropriate solution for this.

Regards,
Mugundhan S.
 


IO IoTFier October 2, 2018 05:16 PM UTC

Hi Mugundhan,

for # 2. I had attached a screen shot as shown below again. It will be helpful if the IconFont property can be set by the name of the font e.g. fa-search as shown in the pic below instead of providing the hex value f002 in the format specified by your documentation.


Thanks

PA Paul Anderson S Syncfusion Team October 3, 2018 11:54 AM UTC

Hi Nilesh, 
 
Thanks for your update. 
 
We have analyzed the reported requirement and currently in our code implementation we don’t have support for directly applying a class-name (HTML language) for FontIcon but this can be done by using a Unicode Glyph. We have attached a video for copying a Unicode Glyph and add into the Iconfont. 
 
 
We have checked with the Unicode Glyph and its working fine. 
 
Please let us know if you have any other concern. 
 
Regards, 
Paul Anderson 


IO IoTFier replied to Paul Anderson S October 3, 2018 12:14 PM UTC

Hi Nilesh, 
 
Thanks for your update. 
 
We have analyzed the reported requirement and currently in our code implementation we don’t have support for directly applying a class-name (HTML language) for FontIcon but this can be done by using a Unicode Glyph. We have attached a video for copying a Unicode Glyph and add into the Iconfont. 
 
 
We have checked with the Unicode Glyph and its working fine. 
 
Please let us know if you have any other concern. 
 
Regards, 
Paul Anderson 


Hi Paul, thank you for your response. Which player should I use to play this video?

Thanks

PA Paul Anderson S Syncfusion Team October 3, 2018 12:23 PM UTC

Hi Nilesh, 
  
The video can be played using either Windows Media Player or an other like VLC player and if you find difficult in playing please share the needed format of the file so that we can convert and provide you. 
  
Regards, 
Paul Anderson 


IO IoTFier replied to Paul Anderson S October 3, 2018 03:04 PM UTC

Hi Nilesh, 
  
The video can be played using either Windows Media Player or an other like VLC player and if you find difficult in playing please share the needed format of the file so that we can convert and provide you. 
  
Regards, 
Paul Anderson 


Hi Paul, Media player on my PC doesn't have the required CODEC for this video.

Can you send me a video that I can play in the browser using flashplayer ?

Thanks

PA Paul Anderson S Syncfusion Team October 4, 2018 05:19 AM UTC

Hi Nilesh, 
 
Thanks for the update. 
 
Converting to flash type loses the quality of the video. So, we have converted to basic WMV which is a default WindowsMediaPlayer format file and can be viewed. Please have the video from the below format. 
 
 
In the below screenshot if you tap the highlighted icon the code will get copied which you can paste directly for the value of IconFont API. 
 
 
 
 
 
Regards, 
Paul Anderson 


Loader.
Up arrow icon