Using Font Awesome icons as CSS content


Font Awesome is a great web font icon pack to use with the Bootstrap 3 framework. While the implementation suggests using the <i> element; this is not always beneficial.

The solution is to specify the icons using pure CSS. This can be accomplished by substituting content values for the relevant icon within the Font Awesome font-family.

Take this CSS class for example which uses the “check” icon.

.act-submit:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f00c";
    padding-right: .4em;

Now using the <a> tag you can add a check icon to a Bootstrap 3 button

<a href="#" class="btn btn-primary act-submit">Submit</a>

A complete list of the Font Awesome icon content values can be found on this cheatsheet.

Bootstrap3 with JSF error handling


JSF applications often get called ugly, or cookie cutter. The over use of the components and built in CSS creates the standardized look, but lacks flexibility. Using Bootstrap 3 CSS in combination with JSF attributes you can create a modern look. Take for example this salary sample salary calculator program which leverages JSF components.

Bootstrap 3 + JSF

The following code is used to create the amount input area.

<div class="form-group #{!amount.valid ? 'has-error' : 'none'}">
   <h:outputLabel value="Amount" for="amount" />
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
         <h:inputText id="amount" value="#{myBean.amount}" binding="#{amount}" styleClass="form-control" required="true" requiredMessage="Enter dollar amount"/>

This technique uses bindings to get the validation state of the inputText component. More information can about component bindings can be read on my other article “What is a JSF component binding? How can I use it?“. By intermixing both JSF + Bootstrap you can see how simple it is to give your app a modern look.