Using Font Awesome Icons in a JavaServer Faces h:commandButton

This will be a short blog. Today I spent way too much time looking for a solution. I am writing a web app for my GoPiGo3 robot car. The first version used 5 JSF h:commandButton buttons labelled forward, right, reverse, left and stop. I wanted to replace them with icons from the Font Awesome library. I thought this was a common way to dress up a button but I was wrong. A shout out to the freeCodeCamp site and the forum question that contained the answer https://forum.freecodecamp.org/t/solved-adding-font-awesome-icons-to-an-input-button/74139. It was John Kennedy’s answer to the question “Adding Font Awesome Icons to an input button?”.

While John’s answer dealt with plain HTML, 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.

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>4.7.0</version>
</dependency>
Maven dependency for Font Awesome

The current version of Font Awesome is 5.0.13 but as of this writing 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 just text. If you know me then you may wonder why I am not using i118n. For this blog I have purposely removed references to bundles and have hard coded the text. The production version will use i18n. I have also removed all actions to simplify the code.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <title>GoPiGo3</title>
    </h:head>

    <h:body>
        <h1>GoPiGo3 Control</h1>
        <h:form id="gopigo" >
            <h:panelGrid columns="3" cellpadding="1" border="0" cellspacing="10">
                <h:panelGroup />
                <h:commandButton id="forwardButton" value="forward"/>
                <h:panelGroup />
                <h:commandButton id="leftButton" value="left" />
                <h:commandButton id="stopButton" value="stop" />
                <h:commandButton id="rightButton" value="right" />
                <h:panelGroup />
                <h:commandButton id="reverseButton" value="reverse" />
                <h:panelGroup />
            </h:panelGrid>
        </h:form>
    </h:body>
</html>
index.xhtml with test for buttons

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.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <title>GoPiGo3</title>
        <h:outputStylesheet library="webjars" name="font-awesome/4.7.0/css/font-awesome.min-jsf.css" />
    </h:head>

    <h:body>
        <h1>GoPiGo3 Control</h1>
        <h:form id="gopigo" >
            <h:panelGrid columns="3" cellpadding="1" border="0" cellspacing="10">
                <h:panelGroup />
                <h:commandButton id="forwardButton" value="" class="fa fa-arrow-up fa-3x" />
                <h:panelGroup />
                <h:commandButton id="leftButton" value="" class="fa fa-arrow-left fa-3x" />
                <h:commandButton id="stopButton" value="" class="fa fa-hand-stop-o fa-3x" />
                <h:commandButton id="rightButton" value="" class="fa fa-arrow-right fa-3x" />
                <h:panelGroup />
                <h:commandButton id="reverseButton" value="" class="fa fa-arrow-down fa-3x" />
                <h:panelGroup />
            </h:panelGrid>
        </h:form>
    </h:body>
</html>
index.xhtml with Font Awesome icons

You can see all the icons available in version 4.7 of Font Awesome at https://fontawesome.com/v4.7.0/cheatsheet/

There you have it. There is a price to pay for this. I wanted 5 icons from Font Awesome and the Font Awesome jar file is 674 KB. I will likely switch to using 5 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. I wanted to learn how to use Font Awesome on its own.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.