Using Font Awesome icons as CSS content

Standard

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.

Collapse.JS creating a dropdown icon on panel heading

Standard

By default Bootstrap 3 comes integrated with CollapseJS which offers expandable accordion like panels. These panels are very simple to setup and work great. However, since the font is uncolored it may not be obvious to some users that this panel expands.

Appears to be collapsible

Appears to be collapsible

Using pure CSS a dropdown icon can be placed on all panels that you create. The css places the icon after the link, and switches the icon to a down arrow once the panel has been expanded.

The CSS

.panel-heading a:after {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   color: grey;
}

.panel-heading a.collapsed:after {
   content: "\e080";
}

The result

The result is a more user intuitive collapsible panel. The main difference between using the Primefaces collapsible panel and the bootstrap js version is data accessibility. Primefaces will call a ajax event once the panel is to be rendered. Whereas CollapseJS will have already loaded the data from the backend bean. This may require you to update at the prerendered content manually, but the benefits of self managing the panels far outweighs the negatives.