A better way to use Font Icons?

A better way to use Font Icons?

This is a post that has been on my todo list since we first got Font Icons in v23 (I believe). They are great and allow you to use images instead of words for buttons etc. which is especially great when working on a multi-lingual site. And since they are font-based you don’t take the performance hit you would downloading a bunch of graphics.  But there are a few things I don’t like about the WEBDEV implementation, so here is how I use them.

First a simple example. Let’s add a button, and use a font icon instead of words. Open the description of the button and on the General tab select “Edit with formating”

2020-05-12 09_59_49-Pete's Development Desktop

This brings up the text menu of the ribbon bar and on there we find the Font icons button.

2020-05-12 10_00_47-Pete's Development Desktop

Pressing that gives us a list of icon families to choose from and then a graphic selection of the icons to select from. There is also a search function to help you locate an icon based on its name.

2020-05-12 10_02_35-Pete's Development Desktop

Notice at the bottom there is a note that you must have Unicode enabled for your project configuration. And that is where things start falling apart a bit for me. The reason for Unicode is that these fonts usually have much more than the 255 characters possible in an ANSI font and therefore use Unicode (2 bytes).

First I dislike making my projects Unicode without a specific reason to do so, as it can lead to other issues, with encoding, encryption, file or string manipulation, etc. Secondly, I haven’t seen where making your project Unicode solves my complaint with Font Icons.

Let’s look at the button I created, I used a search icon from the fontawesome-webfont family.

2020-05-12 10_14_21-Pete's Development Desktop

Looks great, doesn’t it? But let’s bring the description up for that button again.

2020-05-12 10_15_10-Pete's Development Desktop

What the heck is that little dot, well that is a Unicode representation. You might think I am only seeing this because my project configuration isn’t set for Unicode, but I haven’t found that setting to make any difference to how this looks at design or runtime.

It’s “not” a big issue as it still displays correctly at runtime and when viewing the page in the page editor. But I feel there is a better way, especially when it comes to changing the image, on buttons etc. I hate jumping through all the hoops of the graphical interface to do that, so let’s take a look at “Uncle Pete’s way”, which is always the better way, just ask my wife 😉

Let’s go back into the description of the button and on the general tab, click on “Edit the HTML code”, instead of “Edit with formatting”

2020-05-12 10_25_06-Pete's Development Desktop

That blasted period is still there, but I got some good news for you, we can change it to a HTML Hex Unicode format instead, like this.

2020-05-12 10_30_24-Pete's Development Desktop

Our button still looks the same in the editor, but now the code behind it is easier to read and more important to manipulate. I hear you, you are saying that’s great but where the heck did that code come from? Well if you do a google search for the font name and cheatsheet you will find a lot of cheatsheets for the icon fonts. Warning: not all cheatsheets are created equal, and sometimes it depends on what version WEBDEV is using versus what version the cheatsheet is for. But with a bit of trial and error, you can find the appropriate one.  For this example, I used https://khan.github.io/Font-Awesome/cheatsheet/ and you can see where I got the code from.

2020-05-12 10_36_08-Font Awesome Cheatsheet

So why do I feel this is a better way? Well, most of my projects have a standard set of icons, edit, delete, add, search, clear, etc. But if I add a button to a page, I have to either go through all the steps to select that icon through the graphical interface again, and hope I remember which one I used, as there might be several similar ones, or I can go find where I used that button somewhere else, copy it onto my page, and remember to remove all the code behind it, rename it appropriate, etc.

With “Uncle Pete’s method” I have a little cheatsheet that lists the codes for all my standard icons, and all I have to do is change the code to the appropriate one, much quicker than either of the above methods. FYI, there are all kinds of other info on this project cheatsheet such as test logins, etc. Every project has all that resource info you need when working on the project. I keep my cheatsheets in Evernote, but anything will work.

One note about this technic, you MUST add one font icon, from the font family you want to use, to a control using the “WEBDEV Way” first. This adds all of the required font icon info to your CSS files, etc. It is also best practice to try to settle on one icon font, otherwise, your CSS will have to include all the info from however many icon fonts you use, which will bloat HTML/CSS, which is part of the reason to use Icon fonts in the first place.

Bonus material, the last paragraph gives you a hint. If you don’t like the font icon options provided by WEBDEV then you can easily add your own to the CSS, there are lots of them out there, and in fact, it is pretty easy to create you own with just the icons you want, further decreasing the size of your HTML/CSS. I have never bothered to go this far with font icons, but I suspect one downside would be they wouldn’t show properly in the page editor and you will only have Unicode representations when editing your pages, controls. Perhaps someone will take up the challenge and let us know!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s