This guide explains how FontAwesome icon font library could be used in Smartface.
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 easily show these icons as easy as writing any texts. There is no need to cut icons for different device screen resolutions.
Download and add font to Smartface
In order to use icon font first, you need to download and add it to your Smartface workspace.
- 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.
As you can see in the WebPage http://fortawesome.github.io/Font-Awesome/icons/, there are many different types of icons are listed.
- Open http://fontawesome.io/icons/ and select your icon. For example let's start with an anchor icon.
- Find the unicode value of the icon. You can get it directly from Anchor icon page as shown in the picture.
- Open your Smartface app, create a font object and set font name to "FontAwesome"
- Create a Label and set it is 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 unicode value you found in webpage. In the anchor example it becomes "uf13d".
- You can change the color, alignment and some other properties of Label if you want.
Here is a sample screenshot with 3 label objects that used with different icons and properties :