Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

Using FontAwesome Icon Font Library

What is icon font library?

Font Awesome is a full suite of more than 600 pictographic icons for easy scalable vector graphics on websites and applications.
With using icon font library in your Smartface apps, you can use these icons as easy as writing text. There is no need to insert images for different screen resolutions.

Downloading and adding the font to Smartface

In order to use the icon font, you need to download and add it to your Smartface workspace.
Steps;

  • Download FontAwesome package from http://fontawesome.io
  • Go into "fonts" folder and rename "FontAwesome.otf" to "FontAwesome_n.ttf".
  • Follow "Font Usage" guide and add "FontAwesome_n.ttf" to your project.

Find icon unicode value and use it in JavaScript

  • Open "http://fontawesome.io/icons/ and decide on your icon. For example, an anchor icon.
  • Find the unicode value of the icon. You can get it directly from the icon page as shown in the picture.
  • Create a Label and set its font to FontAwesome.
  • Change the text value of label and set it to unicode value of the icon. You must add a ā€œuā€ letter in front of the unicode value. In the anchor example it becomes "uf13d".
        var myLabel = new Label({
            width: 120,
            height: 60,
            backgroundColor: Color.create("#00A1F1"),
            font: Font.create("FontAwesome", 20),
            text: JSON.parse('"\uf13d"')
        });
  • You can change the color, alignment and some other properties of the Label if you want.

Using FontAwesome Icon Font Library