Using FontAwesome in LiveCode

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Post Reply
netdzynr
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Sat Apr 08, 2006 6:04 am
Contact:

Using FontAwesome in LiveCode

Post by netdzynr » Thu Jul 02, 2015 8:29 pm

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
Posts: 280
Joined: Fri Jan 09, 2015 6:15 pm

Re: Using FontAwesome in LiveCode

Post by ToddFabacher » Fri Jul 03, 2015 3:18 am

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
Posts: 280
Joined: Fri Jan 09, 2015 6:15 pm

Re: Using FontAwesome in LiveCode

Post by ToddFabacher » Fri Jul 03, 2015 6:21 am

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

Thanks again Scott
Attachments
FontAwesome.livecode.zip
(81.13 KiB) Downloaded 127 times

netdzynr
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Sat Apr 08, 2006 6:04 am
Contact:

Re: Using FontAwesome in LiveCode

Post by netdzynr » Fri Jul 03, 2015 7:57 am

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
Posts: 22
Joined: Mon Oct 21, 2013 2:57 am

Re: Using FontAwesome in LiveCode

Post by msellke » Mon Jul 06, 2015 1:52 am

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.

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”