BlogAll Blog Posts | Next Post | Previous Post
Tuesday, April 19, 2022
Great. More Icons.
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
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
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.
<i class='fa fa-font-awesome'></i> FontAwesome 4
<i class='fab fa-font-awesome'></i> FontAwesome 5
<i class='fab fa-font-awesome'></i> 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.
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.
<i class="fas fa-address-book"></i> 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 <i class="bi bi-person-lines-fill"> <i> or perhaps in Google Material Icons you would use <span class="material-icons-outlined">contacts</span>. 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.
- ms-1 Adds a bit of spacing before the icon, if it comes after the text. Can also use ms-2, etc.
- me-1 Adds a bit of spacing after the icon, if it comes before the text. Can also use me-2, etc.
- fa-fw Makes the icon fixed-with. Useful when icons appear in a column. Like in menus, for example.
- fa-sm When the icon needs to be smaller than the font used.
- fa-lg When the icon needs to be larger than the font used.
Sizing options changed slightly between versions, so be sure to use the appropriate values. In FontAwesome 5 these include fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, and fa-10x. In FontAwesome 6 these are now relative sizes of fa-2xs, fa-xs, fa-sm, fa-lg, fa-xl, and fa-2xl and then absolute sizes of fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x and fa-10x. The baseline for these is normally a 16px font. Note that in either version you can also explicitly set the font-size property as part of the HTML style element.
Additional Bootstrap classes may also help if you find yourself in a situation where the icon isn't aligned perfectly. Nudging the icon up or down a bit, using classes like mt-1 or mb-1 might help. Sometimes adjusting the line height with lh-1 makes all the difference. If you have a really big icon and not as big text, you can try adding align-middle to get things looking better. Similarly, you can change the color of the icon separately from the label by adding any of the Bootstrap colors, like text-warning or something similar. Regardless, there's always something that can be done to get your icon positioned and styled exactly where you want it.
Take It Out For A Spin.
So we can place icons precisely, and size them and all that fun-yet-boring stuff, sure. Not impressed yet? Alright. Well, the next item on the list is animating icons. Specifically spinning icons. But here, too we have choices. FontAwesome has a category of icons just for "spinners". But any icon will work in the same way. Just add the fa-spin class and voila! A spinning icon.
<i class="fas fa-address-book me-2 fa-spin"></i> Address Book
So why would you want an icon to spin? Well, they make for pretty good indicators that something is going on, particularly given the asynchronous nature of TMS WEB Core applications in general. Someday we might cover the insanity that is progress bars. But for now, lets just stick with spinners. For example, a button can be setup with an icon that is not spinning. When you click it, It starts spinning to indicate to the user that some asynchronous operation has started. And then that operation stops it when it is done. If only everything else was so simple. It might look a bit like this , if you were updating an address book, for example:
WebButton1.Caption := '<i class="fas fa-address-book me-2 fa-spin"></i> Address Book'; results := await(...some call to an XData server perhaps...); WebButton1.Caption := '<i class="fas fa-address-book me-2"></i> Address Book';
The idea is that the icon will spin while the operation is being performed. And then stop (and be put back in the right orientation) when the operation completes. How fun is that? It's fun, trust me. And you're not limited to just spinning. In the latest FontAwesome 6 there are a bunch of animation types including fa-beat, fa-fade, fa-beat-fade, fa-flip, fa-bounce and fa-shake. Each of these animation types can be adjusted so if you'd like your icon to spin faster or slower, or even backwards, you've got plenty of options. I've got a project where an icon spins one direction while a form is loading, and then in the other direction while it's WebFormCreate method is being executed. See? Fun. Just like I said.
Still Not Impressed?
Sizing and Animation are just two out of fourteen style customization sections on the FontAwesome 6 website. They've even got a cheatsheet to help make it easier. Here are some other ideas that could take advantage of the more advanced options.
- Add Text or Counters. When an operation completes, you could update the icon with a representative value. Like the bubble showing the count on a new messages indicator. Maybe show how many records were returned, or the time taken, or something else entirely.
- Layers. Icons can be combined in several ways. Simple layers, more complex masks and different colors can be used to convey lots of things. For example, overlaying a flag on a user account to indicate a certain status or adding a big red circle with a line through it over top of an icon representing a function that is off-limits at the moment.
- Lists. Better bullets, bullets that can be animated showing that they're in progress, that kind of thing. Could likewise be used in menus in the same way.
Sample Project v2
Last time out a simple Sample Project was provided where you could simply type in some Bootstrap Classes and see how they'd look when applied to a TWebLabel or a TWebEdit component. Nothing too fancy. Well, now that we've covered FontAwesome, we can add it to the project and spruce things up a bit. As we go through different JS libraries, the intent is to add them to the project in some way. Both to show how the JS library works and also to give a live working example of the many different things that a TMS WEB Core developer is likely to run into. Even with just Bootstrap and FontAwesome on our plate, we can do some fancy stuff.
The most obvious upgrade is that I've added a good chuck of the Bootstrap classes (I won't say all because I'm sure I've overlooked a few) as buttons that you can use to quickly toggle classes and see how they look. I won't be so bold as to even hint that anything in the code be considered "best practices". Rather, think of the Sample Project as just that - a sample of how to do things. Not always the best way. Hopefully not the worst way. I'm sure any part of it can be picked apart and improved. Over time, that's all part of the plan. If you've got some feedback on the project, feature requests or things of that nature, by all means please post a comment here. Here's a summary of things you might run across in the latest version.
- Theme switcher. In the top-right corner are a few buttons that allow you to swap themes. All the theme-related work happens via CSS, so checkout the included samplestyle.css file for the gritty details.
- Dynamic Buttons. The Bootstrap class buttons are all created at run-time. So you can see one way to do that. Clicking a button will toggle that class in the ElementClassName property. Similarly, changing the ElementClassName property will highlight the class buttons.
- Drag and Drop. The buttons can be dragged over the ElementClassName field or any other Class-related field if available. Like ElementLabelClassName in the case of TWebLabel.
- FontAwesome Icon Picker. A row for FontAwesome has been added, and includes just the FontAwesome 5 Free icons. Choose the icon attributes you want and then click on the icon button or drag it into one of the Caption or HTML properties to add it.
- Loading Progress. When the app starts, it takes a bit of time initially to create all the buttons and to populate the lists of icons, so a Loading Progress mechanism was added. Would be better to improve the performance of those operations, but in the interim, this is one way to improve the user experience rather than just blocking the page while the operation runs.
The initialization step was particularly troublesome as I wanted to be able to display an updating message as the various steps were completed. But unless you give the browser a chance to refresh the page, it will happily chug away and NOT update the page at all. So the initialization was split into a bunch of pieces and then some TWebTimer components were used to insert tiny delays into the overall process, allowing for the browser to do its refresh. This gives the result I was looking for. I'm curious how others might have tackled the same problem?
Download the sample project here.
But Wait. There's More!
Well, yes there indeed is more to FontAwesome, but that's all we're going to cover today. A future article in this series will revisit FontAwesome to cover a few more aspects. Like FontAwesome Kits. Why all the excitement about SVG. Fun with CORS. And so on. But until then, I'd love to hear about any icon-related shenanigans you've run across or about any problems that we might be able to address. And if you were one of the developers of those apps years ago with an absolutely absurd set of icons, well, I forgive you 😁
This blog post has not received any comments yet.
All Blog Posts | Next Post | Previous Post