Saturday, January 10, 2015

APEX and Font Awesome integration

In the previous post I talked about scalable vector images. In this post we will integrate Font Awesome in our APEX app, but the steps for the same if you would pick another library.

Step 1: we need to make the library available in our APEX application.

The easiest way to make the library available in your entire application is to add the following line in your Page Template:


How do I know it's that string you might ask. If you go to the Getting Started section of the library you chose it will tell you:

You're actually done now with the integration... You'll find some examples on the site to see the properties you can use (size etc.). The list of icons is also available here.

Here're some examples I use the image fonts for:

An image in a region

Sometimes I just want an image in a region, so I included the paypal icon (fa-paypal) and gave it a bigger size (fa-5x).


You see the result here:

Edit icon in a report

During the creation of a report region you can select the image you want, those are either images or text. Change the Link Icon to following:


Replacing the image will give your report immediately a fresher and more modern look




Icons in the Navigation List

For my navigation list I mainly use the "Vertical List with Subtext and Icon" list template.
By default it looks like this:

We want to say for every list item which icon we want to use. To do that edit the list template and change in the Template Definition:

#LIST_LABEL#

to:





Note: I changed it in both the Current as Noncurrent List Template.

Now we can define the icon we want to use in our List at Attribute 02:


The final step to make the list look nice we need to make the icon float left so it's next to the text and we make it white when you hover. As we use an icon font we can just change the color with some css (you can add that on your page or in your page template in the Inline CSS position).


This is the result:

You find the online example at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:FONTAWESOME

11 comments:

awm-paf said...

Hi Dimitri
Font Awesome is really nice...

But the url provided here for the cascading style sheet is wrong!
It should start with
http:
instead of //
so it should read:
http://maxcdn...

Dimitri Gielis said...

Hello,

It should work with either - the advantage when you don't specify is that it works for both https and http.

Also note that you can change 4.2 to 4.3, as Font Awesome just got an update.

Thanks,
Dimitri

Anonymous said...

Hi Dimitri,
i tried to use your example but i had icon with ? or FIELD.

I notice on Firebug 2.0.7 that under .fa-bar-chart-o:before, .fa-bar-chart:before {
content : " ";
}

the content is empty..



How can i resolve this problem ?

Thanks
Bob

Anonymous said...

Thanks for the info
How would you use it for buttons?
Do I need to create a button template for each icon?
Thank you

Dimitri Gielis said...

You can create one generic button template specific for Font-Awesome (class=fa).

In APEX 5.0 you can use template options.

Anonymous said...

Thank you.
I was thinking more to use the button templates, especially in theme 25, and incorporate FontAwesome by using the CSS substitution string. I figured out a solution and I will share it soon. Feel free to tweak it if you think of a better way.

Gilcrest said...

Thanks for the post, Dmitri! Seeing as APEX 5.0 comes with Font Awesome already "built in" - are there any downsides to adding this the way you're doing it? I really want to use some of the 4.3 Font Awesome icons and trying to figure out the best path forward.

Thanks!

Dimitri Gielis said...

You can include the url of the CDN of the latest version of Font Awesome in the icons section in APEX 5.0

Anonymous said...

Hi,
how can I change color and size of vertical sidebar list in oracle apex??.iam new to oracle apex.

Dimitri Gielis said...

You can use Theme Roller - at the bottom in the developer toolbar - and define another colour there.

Harsha said...

Hi,

I have installed a custom font file(ttf) in below 2 locations and trying to access it from the page(font face="" size="") but not successful, can you please guide me if I'm doing something wrong?

/apps/applmgr/ords/apache-tomcat-9.0.11/webapps/i/libraries/font-apex/2.0/fonts
/apps/applmgr/ords/apache-tomcat-9.0.11/webapps/i/app_ui/font/

Thanks,
Harsha