Friday, February 3, 2017

Using Font Apex in Apex 5.0


Apex 5.1 introduced Font Apex, a new icon library designed to complement Universal Theme and to replace Font Awesome. The same "fa" prefix for the icons was kept so that it's easier to move from Font Awesome to this entirely new icon library.

Font APEX comes with a number of customizations built-in, enabling us to easily control the size, animation, rotation, and even add modifiers on top of icons. You can try customizing your icons using the Icon Builder in the Universal Theme sample application.

What if you are still on Apex 5.0 and would like to use it?

Don't worry you are able to do so.
Here's how you can do it.

First let's get the Font Apex library files.
You can get them from the Apex 5.1 installation file under the "images\libraries\font-apex" folder (or from here)
Then you will need to import these files in your application (let's do it using the Static Application Files for the sake of simplicity, but you could also import them in the Static Workspace Files or copy them on your web server).

Note: zipping the font-apex folder will enable us to upload only that zipped file instead of every single file from the folder using the zip file will also keep the folder structure.




You will end up with the following files:



Then, let's remove the Font Awesome and include the Font Apex.



Notes:
Step 4 removes the Font Awesome reference.
Step 5 uses the Font Apex CSS file reference from above step. Notice that the .min was replaced by #MIN#
From help text:
If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. 

At this point, if you try to run your application, you should be able to see most of the Font Apex icons.

There are some tweaks we still need to do so that everything is displayed nicely.
First, there is still a class that uses the "font-family: font-awesome;", which is used by the expand/collapse navigation menu button.

The other thing we need to change is the height of the icons.
Font Awesome uses 14x14 icons whereas Font Apex uses 16x16 icons. Some icons might not be displayed correctly. The expand/collapse navigation menu button is also one of those.

Here's the CSS that is required to fix these.

.t-Icon[class*=' fa-'],.t-Icon[class^=fa-]{
    font-family: font-apex!important;
    font-size: initial;
}

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content .fa{
    font-size: initial;
}

Enjoy Font Apex in your Apex 5.0 applications!

Edit 1: The Custom Prefix Class attribute needs to be set to "fa"

Edit 2: Scott Wesley has a nice followup to this: http://www.grassroots-oracle.com/2017/03/font-apex-between-versions.html

7 comments:

  1. Sorry, as the question is not relevant to this post, but I can not find another way of contacting you. Could you advice me if the Image Cropper plugin could be used on a mobile device via the Apex 5 mobile theme?

    Thank you

    ReplyDelete
    Replies
    1. Hello
      I just updated my profile so that it's showing my email, you can also contact me on twitter @mtremblaydev

      Maxime

      Delete
  2. Was quick to apply, no suprises there, but icons in submenus are normally shrunk. So far they remain awkwardly larger.

    ReplyDelete
  3. Hi Maxime,
    thank for the useful Infos. When using the APEX FONT, the "a-Icon" class is not working
    "t-Login-iconValidation a-Icon icon-check" in the Login Page does not works
    Any Ideas?

    Thanks

    Pierre

    ReplyDelete
    Replies
    1. Hello Pierre
      In order for the icon to show, the item has to be set to Required (under the validation section).
      The login page items are set to "not required" by default.

      Regards
      Maxime

      Delete
    2. Hi Maxime,

      great. Works fine.

      Thank you

      Delete