This time out, we are exploring FontAwesome, another wildly popular JS library. Like Bootstrap last week, FontAwesome requires no JavaScript coding knowledge and very little in the way of HTML or CSS knowledge either.  And while it does have a lot to do with fonts, and is indeed truly awesome, the main benefit we’re going to get from FontAwesome in terms of our TMS WEB Core projects is its enormous icon library.

Great. More Icons.

Last week, we touched briefly on the topic of Bootstrap Icons. 1,600 or so freely usable icons that you can directly use in your projects. There are also Google Material Icons. Several thousand more icons that also come in five different styles. The Google Material Icons library is even included in the JavaScript Library Manager in the Delphi IDE, so getting started is easy enough. If you’ve used one of these sets of icons previously in your projects, you might be reluctant to switch to something else.  The look of the Google icons will be familiar to many and might be somewhat of a safe choice. 

Long-time developers might feel a bit of a chill when reflecting back on icons of ages past. There was a time when you could pretty accurately guess what tools were used to create an app based entirely on how audacious the icons were.  Like acid-wash jeans and tie-dye shirts, these are thankfully well behind us and we now have mostly sane choices to pick from.  Also long gone are less-than-fun topics like multi-res bitmaps, bmp-vs-ico, transparency issues, and anything to do with scaling.  I suspect our children will never care what a pixel is because they won’t actually be able to see any individual pixels anywhere without a microscope. 

Back to the topic at hand.  Like Google Material Icons, FontAwesome has a handful of different styles to choose from.  And I personally much prefer FontAwesome styles to the Google equivalents, but there’s more to the story than just the look of the icons.  Much more.

Making Your Project FontAwesome

The FontAwesome library was recently added to the “Manage JavaScript Libraries” list, sometime around TMS WEB Core 1.9.8 or so.  It lists both FontAwesome 4 and FontAwesome 5. FontAwesome 6 also came out a couple of months ago.  We’ll run into some of the differences closer to the end of this article.  But I think everything we’re going to cover today will work the same in any version unless otherwise noted.  One thing that is different between versions is the icons themselves – new icons are added and occasionally icons are changed or removed or, more likely, renamed or redesigned.  This can even happen mid-version, so something to keep an eye out for, particularly if you want to use the very latest icons.  If your project doesn’t already use FontAwesome, just pick the highest version available from the “Manage JavaScript Libraries” list and you’re done!

If you’d like to use a  particular version of the FontAwesome library, or a particular CDN, or even host the libraries yourself, then the usual approach of adding files to your Project.html file works just fine as well.  Or you can use the JavaScript Library Manager to update the list to suit your particular needs.  Both FontAwesome themselves as well as any reputable CDN will have a wide array of versions available.   For example, in our Sample Project, I’ve got the following, as provided by the JavaScript Library Manager.

Alright.  So how do you know that it is working?  Create a TWebButton (using perhaps Bootstrap classes like btn btn-primary fs-2 px-4 rounded-pill) and set the caption to include a FontAwesome icon, like one of the following. If FontAwesome is installed and working, you’ll end up with something that looks like one of these. 

     FontAwesome 4

     FontAwesome 5

     FontAwesome 6

If you don’t see a flag of some kind, it could be that you put in an icon value for a different version of FontAwesome.  For example, the fab style wasn’t part of FontAwesome 4, so if you try to use it you’ll get either a blank space where an icon should be, or an empty rectangle or something else that is telling you that it isn’t working.  Generally, once you see that you’ve got an icon, you’re all set.  

A Free Car Icon For You.  And For You.  And You Too.

Before we get any further, let’s quickly talk about the free-ness of FontAwesome.  Like many other projects, there is a free tier and not-free tiers.  The first not-free tier is $99/year (USD).  For some (me included) that’s a lot of cash for icons.  Fortunately, the free tier offers a huge number of icons.  Curiously, there are also 1,600 in FontAwesome 5 (the same as the number as Bootstrap Icons), but 2,000 in FontAwesome 6.  Much of the functionality we’re going to cover works the same regardless of tier.  So for a great many projects, this is likely to work really, really well.  No need to even consider anything more.

But what does the cash buy you?  Well, there are quite a few things.  First, a pretty significant bump up in the quantity of icons. More than 7,800  in the case of FontAwesome 5 and (checks notes again…) more than 16,000 in FontAwesome 6.  Note that when searching for icons, be sure to click the “Free” option to hide all the rest and you’ll be a much happier person.  Less an issue about the constant reminder that you’re using free icons and more an issue about icons that are missing because you put in one that was on the non-free list.  Or if you’re like me you’ll eventually be worn down and find yourself one day looking at a receipt for all the icons you never knew you needed in your life.    

Another key difference is in the style of icons available between the Free and Pro versions.  The styles on offer include Solid, Regular, Light, DuoTone and, as of FontAwesome 6, Thin.  The Free tier is mostly just the Solid icons as well as some Regular icons. Which are great, no question, and easily worth the (free) price of admission.  On my main website (https://www.500foods.com which is a Drupal / PHP site) I use these extensively and they work just great.  When it comes to web applications though, I’ve found that I’m rather smitten by their Duotone icons (for example, https://www.everydayipm.com which is 100% TMS WEB Core).  And the satisfaction that when I find that perfect icon, I know I can use it without having to see if it is part of the free set.  Note that there are also Brand icons available in the free tier, but these generally don’t help much in the way of application design. Unless you’re using products or services from those brands, of course.

The only other difference worth mentioning at this stage is that FontAwesome now offer more specialized “kits” to help make deploying icons to your website easier.  Well, it’s already pretty easy so that might seem like a tough sell.  But there are other things that go into kits, such as custom icons, traffic limits, and different technologies that raise the level of appeal somewhat.  It might also depend on the scale of your project.  If you’ve got a handful of daily visitors, it doesn’t really matter.  But as that number increases, these kinds of things become more relevant.

Adding Icons

Well, that’s why we’re here after all.  Time to roll up our sleeves a bit and see what these fancy icons can do. As we’ve already shown, it is easy enough to just add an icon to many Caption properties of components in TMS WEB Core.  In the case of TWebLabel, there is a separate HTML property.  Which can be handy if you want to add text that looks like HTML without it being converted to HTML.  Icons can be inserted just by adding in the HTML for the icon.  And you can add more than one icon if you’re so inclined.  The general format is as follows.

    Address Book

The fas bit refers to the style.  In this case, it is short for Font Awesome Solid.  Other options include far, fal and fad. There is also fab which is short for FontAwesome Brands.  And if you’re using FontAwesome 6 Pro, then yes, indeed, the Thin style is actually fat.  Funny.  Anyway, you can also use the long-form classes of fa-solid, fa-regular, fa-light, fa-thin, fa-duotone and fa-brands in FontAewsome 6.  We’ll just be concerned with fas for our purposes here.  And even though I adore many of their Duotone icons, I often still go with the solid variant because sometimes they’re a little too creative.

The fa-address-book is of course a reference to the actual icon in question.  They all have an fa- prefix, and often you can just switch between fas and far or any of the other types to get the same icon with a different look.  Not all icons are duplicated in every style but certainly many are.  There are so many icons that you can often just guess at a name and find one, but their icon page is just a couple of clicks away.  Good to check for similar icons as well when searching as they usually have several options for the same thing.  But their search doesn’t always find related matches very well so it is good to search for different terms if you don’t immediately find what you’re looking for.

The non-HTML part of the example above is of course just the text that will appear beside the icon on your TWebButton or TWebLabel or wherever else you’re using these.  Something to remember, which I am guilty of forgetting at times, is that these are treated like fonts so they do in fact change sizes and colors when your font sizes and colors change.  And through the magic of modern technology, they tend to always look pretty great at all sizes.  

What’s So Special About That?

So far, this is the same approach you would use if you were using other sets of icons.  For example, with Bootstrap Icons you might use something like or perhaps in Google Material Icons you would use contacts.  Neither one of which looks like an address book, oddly enough. Where things start to get interesting is that you can add a host of other classes as well. In fact, you can even add Bootstrap classes and just have a field day doing things to icons that mother nature never intended.  Here are some of the classes I find myself using frequently.

    WebButton1.Caption := ' Address Book';
    results := await(...some call to an XData server perhaps...);
    WebButton1.Caption := ' Address Book';