Manually add Font Icons on Native Mobile

In order to use any font icon, the user must create a theme class that applies the desired font, and then pass the icon's "encoded code" to the UI control where it will be displayed.

The user must first create the desired UI element (Textblock, Attribute, Button, etc) and assign one of the theme classes provided by WorkWithPlus for Native Mobile.

Then, the user must encode the icon "hex code" using the procedure "SDPlusBaseObjects.SDPGetUnicodeFromHex()", and the result must be assigned to the UI Control's caption property.

The icon's "hex code" must be obtained from the library's official web page or documentation. Please check Font Icons Libraries for more information

e.g.:

Let's select an icon from the "Font Awesome" library.

wwpsd_editor_fonticon_cheetsheet1

Then, create a "Textblock" or a "Button", and assign the classes

wwpsd_editor_fonticon_sample1

And finally, in the "start" event, encode the selected icon "f1c5", using WorkWithPlus for Native Mobile APIs

Event Start
    // Icon in Label 
    FontIconLabel.Caption = SDPlusBaseObjects.SDPGetUnicodeFromHex(!"f1c5")    
    // Icon in button 
    FontIconButton.Caption = SDPlusBaseObjects.SDPGetUnicodeFromHex(!"f1c5")
Endevent

You can see the result here:

wwpsd_editor_fonticon_sampleresult

Default theme classes

SmartDevicesPlus provides the following classes that can be used or sub-classed:

Attribute

  • IconAttributeFontAwesome
  • MenuIconFontAwesome
  • IconAttributeMaterial
  • MenuIconMaterial

Button

  • ButtonFontAwesome
  • ButtonMaterialIcon

TabPage

  • TabPageFontAwesome
  • TabPageFontAwesomeSelected
  • TabPageMaterialIcon
  • TabPageMaterialIconSelected

TextBlock

  • IconFontAwesome
  • IconMaterial