Using FontAwesome in LiveCode

[netdzynr]

A question came up in the Create It webinar about how to use the FontAwesome glyph font (icon font) in LiveCode. Assuming you have the font loaded on your system, here's one method you can use for LC7 and later:

1) Locate the icon you need using any of the "cheat sheets" available online, such as this one:
http://fortawesome.github.io/Font-Awesome/cheatsheet/
Make note of the Unicode string associated with the icon character. For example, the Apple icon is 

2) Tweek the Unicode string by changing the first 2 characters &# to 0 (zero) and removing the trailing semicolon, so the string reads as 0xf179.

3) Set the textFont of the control (ie a button or field) where you intend to display the icon to "FontAwesome". Then, in the case of a button, set the label property of the button using the numToCodepoint function. Example:

Code: Select all

set the label of button 1 to numToCodepoint("0xf179")

In LiveCode 6 and earlier, you first need to enable the useUnicode property before applying Unicode text, and then (using a button as an example) set the unicodeLabel property of the button using the numToChar function.

Code: Select all

set the useUnicode to true
set the unicodeLabel of btn 1 to numToChar("0xf179")

Hope this helps.

[ToddFabacher]

Thanks Scott, I have already started using it in one of the apps just started.

I will say, I was not able to use the regular buttons. LC sees it as a font and will not have both the font icon and text below it. But I just created a group with 2 fields and it worked perfect!

--Todd

[ToddFabacher]

Here is sample code of a left sided bar menu using Font Awesome.

Thanks again Scott

[netdzynr]

An important point to note about using glyph fonts (or any custom fonts) in LC is that you need to be meticulous when referencing fontNames on mobile and desktop systems. iOS will often "see" the name of a font differently than how the name displays on the desktop. iOS often includes weights and/or styles in font names, so while Mac OS X sees the name of the FontAwesome font as "FontAwesome", iOS sees the name of the font as "FontAwesome Regular". Also, just like most every filename on iOS, font names are case sensitive.

While this is something of a headache when moving back and forth between desktop and mobile, knowing the above might save a few people headaches caused by fonts not rendering on one platform or another.

(BTW, Todd the icons in your stack don't display correctly on OS X because the textFont applied to your fields is "FontAwesome Regular" -- changing the textFont of your fields to "FontAwesome" causes the icons to show up on that platform.)

[msellke]

Hi Scott,

I was the one who asked the question.
And I really appreciate you taking the time to post this.
Thank you it has helped me immensely.