Here is an example of modifiying templates to use the new and stylish font-awesome icons.

Make sure font-awesome is installed correctly and ready-for-use. You have the option to either set the css-file on the pages where you want to use the icons, or you can incorporate the link to the css-file in the page-template by adding following statement to the header.

<link rel="stylesheet" href="http://[your.own.path]/font-awesome-4.2.0/css/font-awesome.css">

Otherwise just add the value of the href-attribute to the css File URL's on the page-settings.

To use the icons in an List-region just follow the upcoming steps:

• Go to "Shared Components" -> and filter for Lists 
• Make a copy of the existing template named "Horizontal Images with Label List" using the Copy-Button
• Change "List Template Current" and "List Template Noncurrent" to:

    <li>
      <a href="#LINK#">
        <div class="fa #IMAGE#" style="font-size: 64px; color: #IMAGE_ATTR#"></div>
        <span>#TEXT#</span>
      </a>
    </li>

That's everything that need to be done to the template which is then ready-for-use.

You may now create a List of your desire via "Shared Components" ->

For each entry: set Image to the font-awesome-css-class of the icon and Attributes to a color of your choice.

At last: Create a List-region on a page and set the Type to your List you created just before and List Template to the new Template.

The result would look something like that:

You can enhance the List further by adding a dynamic action that changes the icon-size and/or color on mouseover.

There is also another nice description in german on apex.oracle.com.

An Live-Example can be found here.