28 July 2014

APEX 5: Using Font Awesome Icons in Report

APEX 5 is currently in Early Adaptor 2, so the exact implementation of this blogpost might change when APEX 5 goes GA.
Font Awesome is standard included with APEX 5 and you can use the icons on buttons, there is a special property for that.
I was playing around the other day and I wanted to include some Font Awesome icons in my report.
First create a report (classic or interactive, whatever you want) and use the following query:
select empno
      ,case mod (rownum, 2)
       when 0 then 'male'
       when 1 then 'female'
       end gender
  from emp
Because the EMP table doesn't have a gender column, I decided to create one using a CASE statement. Some are "male" and some are "female".
Navigate to the GENDER column.
With the GENDER column highlighted, move your attention to the right side of the Page Designer and focus on the Properties panel.
In the section labelled "Column Formatting", enter the following for "HTML Expression":
<span class="t-Icon fa-#GENDER#"></span>
The names of the font awesome icons always start with "fa-", so this is prefixed to the content of the GENDER column. The result of a "female"-rows will be
<span class="t-Icon fa-female"></span>
For "male"-rows it will be
<span class="t-Icon fa-male"></span>

And that's it.
The report will look like the screenshot below. As you can see there are icons for the males and the females in the EMP table.


  1. Wonderful site! Glad I come across here it carries good data all in favor of readers actually, I was searching online articles that I can benefit.


  2. NICE! I used this for fa-lock/fa-unlock. Thank you

  3. Excellent stuff, Alex, as usual. Is there anywhere an overview of all available fontAwesome icons that are available within APEX 5.0, please?

    Good luck!

    1. You can always refer to the FontAwesome Icon set: http://fortawesome.github.io/Font-Awesome/icons/

    2. By the way..., your example is used in a Report, I presume. I am trying to do something similar in a DML Form, but for items on a DML Form there is no section "Column Formatting".
      When I use the Pre Text and Post Text settings, to enter the spans like you define, these values are rendered in the wrong place. If you have any advice, that would be appreciated. Thanks a lot!

    3. Yes, it is used in a Report (hence the title of the post ;) ).
      What is it that you want to achieve? Perhaps something like the Star-Rating plugin? https://apex.oracle.com/pls/apex/f?p=654321:201::::::

    4. I missed that (the Report header)! :-)
      I wanted to achieve that rather than mentioning Male or Female a fontAwesome icon would display stating the person's gender.
      Meanwhile I have defined two buttons, called Male and Female. Depending on the value of the GENDER column, which I created new as part of the EMP table, it will conditionally display the Male or Female button. Thanks for your inspiration, Alex.

  4. I really like your ideas. I truly appreciate your effort in publishing this article. Keep it up and God bless.


  5. Hi,

    Is there a way, how you can create link in report with custom awesome icon? For example put #ICON# (from report definition) into Link Text attribute?



    1. Yes, you can. Add an anchor-tag to the HTML-expression:
      <a href="f?p=93347:1"><span class="t-Icon fa-#GENDER#"></span></a>

  6. Thanks for your answer, maybe I mistekenly wrote my question, let's suppose that whole HTML expression is in #ICON#, because sometimes I need to omit the link in report (in times when user don't have permission). Oracle APEX escape the HTML expression. Is there a way how to do it?

    1. You could use a CASE expression in the SQL-statement to show/hide the value for that column. Or maybe create an example on apex.oracle.com, so I can see what's going on?