APEX 5.0: Upgrade to the newest FontAwesome Icon Library

Oracle APEX 5.0 ships with FontAwesome version 4.2.0 which will automatically be loaded if your application is using the Universal Theme. This makes it super easy to add nice looking icons to your buttons, lists and regions. But how can you integrate the most current version of FontAwesome if you have found an icon on the FontAwesome Icon Gallery which is not already part of 4.2.0? Actually that’s pretty straight forward!

  1. In your Application go to Shared Components – Themes
  2. Click on Universal Theme – 42 to edit it
  3. Go to the Icons region
  4. Clear the Library attribute by setting it to – Select Library –
  5. Set Custom Library File URLs to //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css Note: If you don’t want to or can’t reference files from a Content Delivery Network, you can also download the FontAwesome files and upload them as Theme Files. In that case you would reference them with #THEME_DB_IMAGES#font-awesome/4.3.0/css/font-awesome.min.css
  6. Set Custom Prefix Class to fa
  7. Click Apply Changes

Edit Theme to use new FontAwesome version

Now it’s time to edit the component where you want to use the new icons. For example set the Icon CSS Classes attribute of a button to fa-bed

Button with Bed Icon

Please keep in mind that the above changes have a drawback, by changing your theme to a Custom Icon Library, Page Designer will not be able to preview icons in the Pick Icon CSS Classes dialog anymore.

7 thoughts on “APEX 5.0: Upgrade to the newest FontAwesome Icon Library

  1. Hi Ricardo,

    you can use

    <span class="t-Icon fa fa-anchor" aria-hidden="true"></span>

    to show an icon in a classic report column.

    Regards
    Patrick

  2. Hi Patrick,

    It works, perfectly, thanks a lot.

    Just one more thing i’ve tried to apply a color in the icon using “text-danger” as follows, but for some reason doesn’t work, his this a limitation in apex?

    Thanks

  3. Hi Ricardo,

    unfortunately I don’t see the html markup you posted. Is the CSS class text-danger something you defined in your app? But basically it comes down that you have to set the style “color” to some value. For example

    text-danger { color: red; }

    Regards

  4. Hi Patrick! Is it possible to retrive via SQL fa icons installed in APEX? I’d like to have a select list with all available items.

    Thanks!

Comments are closed.