I am writing a web app for my GoPiGo3 robot car. The first version used 5 JSF h:commandButton buttons labeled forward, right, reverse, left, and stop. I wanted to replace each button with icons from the Font Awesome library. I thought this was a common way to dress up a button, but I was wrong. First, I would like to give a shout out to the freeCodeCamp site and the question forum that contained the answer to my problem.

In this question forum on freeCodeCamp, John Kennedy provided an answer that dealt with plain HTML. However, the attributes he used are also found in the JSF h:commandButton tag. Here is what my robot control panel first looked like:

Next, using Font Awesome icons:

My projects are always Maven-based. To be able to use Font Awesome, I added the following dependency:

The current version of Font Awesome is 5.0.13, but, at this time, I am unable to get this version to work. I have emailed the Font Awesome people concerning this.

Next is the JSF page. Here is the original version with plain text. If you're wondering why I am not using i118n, for this blog, I have purposely removed references to bundles and have hardcoded the text. The production version will use i18n. I have also removed all actions to simplify the code.

Here is the Font Awesome version. Take note of the h:outputStylesheet in the h:head section. For the buttons, I refer to the Unicode value for the icon and the matching class name. The class name has three parts. The first is the library name, fa. The second is the name of the icon, such as fa-arrow-right. The third, fa-3x, is a size multiplier. Font Awesome icons are displayed based on the current CSS value of the page so the multiplier allows you to enlarge the icon without enlarging anything else.

There you have it. However, there is a price to pay for this. I wanted five icons from Font Awesome and the Font Awesome jar file is 674 KB. I will likely switch to using five small jpeg images for the buttons, as the application needs to run on a Raspberry Pi. My students frequently use Font Awesome as part of Bootstrap and Primefaces. But, I wanted to learn how to use Font Awesome on its own.