Page tree
Skip to end of metadata
Go to start of metadata

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. 

Steps;

  1. Download FontAwesome package from http://fontawesome.io
  2. Go into "fonts" folder and rename "FontAwesome.otf" to "FontAwesome_n.ttf".
  3. 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.

Find icon unicode value and use it in JavaScript

  • Open your Smartface app, create a font object and set font name to "FontAwesome"
var myFont = new SMF.UI.Font({
		name : "FontAwesome",
		size : 35
	});
  • 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".
var lblAnchor = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		multipleLine : false,
		borderWidth : 3,
		borderColor : "#808080",
		text : JSON.parse('"\uf13d"'),
		fontColor : "#0000ff",
		font : myFont
	});
  • You can change the color, alignment and some other properties of Label if you want.

Sample screenshot

Here is a sample screenshot with 3 label objects that used with different icons and properties :