Make your Delphi applications pop with Font Awesome!
Yes you heard right, Font Awesome? You can use their icons to make your desktop applications pop. Nowadays I use it to make my websites look nicer and without having to worry about finding icons for my apps and edit them and so on. Font Awesome is one the smartest things you can use to make your applications pop.
Font Awesome provides a cheatsheet that can be used to copy and paste the icons directly in your app so you don't have to worry about memorising any particular code to make the icon appear:
Nowadays I use the common approach where I buy certain icons or draw them myself using Photoshop (although this second option is quite time consuming and I only do it when I want to achieve the best results).
I'm sure you are all familiar with this approach, you add your icon in bmp format into one ImageList component, then link the ImageList to the button and select the icon index so it appears in your button as displayed in the image above. The problem arises when you want to have different sizes of that button as you will have to have different icon sizes to match it and so on.
So one of the things that I tend to do now in my applications and that makes it look a bit more standard (in terms of user experience as the user sees the same type of icon throughout the application) is by using Font Awesome:
The animation above displays how to replace one of you icons with a Font Awesome icon easily:
In the images below you can compare the before/after and you'll see that the difference is noticeable:
Before (mixture of icons in bmp format plus some png images made with Photoshop):
After (Font Awesome fonts replacing all the icons):
Notice that now I can even include icons where there should only be text! so using this way I can compose my headers in a nicer way and include a very descriptive icon.
You will need Font Awesome font installed on your machine or target machine in order to take advantage of this functionality. I've used the latest Delphi 10.2 Tokyo on this one if anyone was wondering about it.
The example above is for VCL only and it should also for for FMX applications.
Example with FMX:
Use Font Awesome icons in Desktop apps
First download Font Awesome and install it in your computer. At the time of this article I was using version 4.7.0 so I downloaded font-awesome-4.7.0.zip and installed the FontAwesome.otf file on my Windows 10 machine:
Font Awesome provides a cheatsheet that can be used to copy and paste the icons directly in your app so you don't have to worry about memorising any particular code to make the icon appear:
Nowadays I use the common approach where I buy certain icons or draw them myself using Photoshop (although this second option is quite time consuming and I only do it when I want to achieve the best results).
I'm sure you are all familiar with this approach, you add your icon in bmp format into one ImageList component, then link the ImageList to the button and select the icon index so it appears in your button as displayed in the image above. The problem arises when you want to have different sizes of that button as you will have to have different icon sizes to match it and so on.
So one of the things that I tend to do now in my applications and that makes it look a bit more standard (in terms of user experience as the user sees the same type of icon throughout the application) is by using Font Awesome:
The animation above displays how to replace one of you icons with a Font Awesome icon easily:
- Locate the icon you want in the Font Awesome cheat-sheet.
- Copy the icon image (not the Unicode code).
- Locate the component you want to add the icon to.
- Select Font Awesome font.
- Paste the icon in the caption or text zone.
- Adjust size to your needs.
In the images below you can compare the before/after and you'll see that the difference is noticeable:
Before (mixture of icons in bmp format plus some png images made with Photoshop):
After (Font Awesome fonts replacing all the icons):
Notice that now I can even include icons where there should only be text! so using this way I can compose my headers in a nicer way and include a very descriptive icon.
You will need Font Awesome font installed on your machine or target machine in order to take advantage of this functionality. I've used the latest Delphi 10.2 Tokyo on this one if anyone was wondering about it.
The example above is for VCL only and it should also for for FMX applications.
Example with FMX:
Jordi
Embarcadero MVP
Doesn't seem to work with Firemonkey
ReplyDeleteHi there,
DeleteI've just tried with Firemonkey and it worked perfectly. See the last image that I put in the article and you'll see that it gets displayed correctly.
Cheers,
Jordi
Nice. It would be better if the font didn't have to be installed on Windows (e.g. used from resource or program folder).
ReplyDeleteHi Jonjbar,
DeleteI guess that it could be done. I might give it a go and see as I'm doing something similar for my Android apps so I can bring the font with the app without having to install anything.
Cheers,
Jordi
Of course it can be done, and extremely easily. In Windows, just use AddFontResourceEx() GDI function to dynamically load fonts. And don't forget to use RemoveFontResourceEx() function before your application exists. You can also put all your fonts into a resource DLL and then use AddFontMemResourceEx() and RemoveFontMemResourceEx() respectively.
DeleteHTH,
Iggy
Thanks Iggy.
DeleteCheers,
Jordi
Excellent, didn't know you could do this.
ReplyDelete