Apex 5.0-5.2 – Logo Text with Icon

This post explains how to add an font icon or a logo to the application header text. For all apex 5 versions including 5.2. This is useful when you want to combine text, like the name of the application together with a simple enchanting logo (icon or image).

Apex 5.0

It is easy to use a Font Awesome icon inside the header text (logo bar).

A logo can be added in Apex 5.0 using a simple span tag and the font awesome icon.
The resulting html code needs to be put into the logo text attribute (Application Properties/User Attributes/Logo)

<span class="fa fa-cubes"></span>&nbsp;Demo Icon Apex 5.0

Result
Apex5_logo_Icons

Decent!

Apex 5.1

Ok lets try the same thing in Apex 5.1 using the new Font-Apex.

If you upgraded from Apex 5.0 and the new Font Apex, then first make sure that the page template is refreshed to the updated universal theme. For details check the Universal Theme migration guide.

 <span class="fa fa-cubes"></span>&nbsp;Icon Apex 5.1

Result

Logo_Apex51

ooooooh ugly!

There are several issues. One thing is that the icon itself changed considerably and not to the better. Fortunatly this is a rare exception. Most icons look fairly decent in Font Awesome and in Font-Apex.

I had the following problem only for Font Apex, not for Font Awesome.
The icon is positioned a little bit higher than it should be. This can be corrected by adding a style for the vertical alignment to the logo attributes or to the span tag.

style="vertical-align:baseline"

This will put the bottom line of the icon on par with the letter line in your text. Logo_Apex51_alignbaseline
Other useful alignments to try out are “middle” or “text-bottom”. more info about vertical alignment on w3schools
Here is what text-bottom looks like. Logo_Apex51_aligntextbottom

It depends from the icon that you choose, which alignment is best suited.

Furthermore lets remove the nasty hardcoded blank space (non-breaking space).
To do so a tiny distance needs to be set between the icon and the text. Defining a class allows to reuse this setting easily.

.fastyle-header-logo::before {
  margin-right:4px;
}

The css class “fastyle-header-logo” then needs to be added to the logo attributes, so that this space is used.

Apex 5.2

The same works in Apex 5.2. The vertical-aline:baseline attribute is still needed there.

However Apex 5.2 also gives us a nice new way to create an application logo.

When creating a new application the blueprint functionality is used. Among many other nice new options, this gives us a way to create an application icon.

Step 1: Create new application and customize the appearance
Apex52_bluepring_dialog1

Step 2: Change the icon
Apex52_bluepring_dialog2

Step 3: Set a color and choose from a limited set of icons
Apex52_bluepring_dialog3

Step 4: Save

After creating the application, we get an svg file that is used as the standard application icon.

Apex52_blueprint_result2

Under shared components there are two new files. The svg image “app-icon.svg” and an app-icon.css file.

Apex52_blueprint_result1

This is the css

.app-icon {
    background-image: url(app-icon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #2EBFBC;
}

It allows us to use the application image in many areas where we can simply specify an icon class.

Per default the application image is used for the login page.
Apex52_login_logo

But I want this image usable in the logo text section. Using the previous solution with a span tag does not work anymore. because the icon is a background image that is then pasted behind the normal logo text.

There are several ways to solve this. Here is what worked for me.
To position the icon left of the text (::before), I created a new class logo-app-icon

.logo-app-icon::before {
    content: "";
    background-image: url(#APP_IMAGES#app-icon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-attachment: local;

    width: 1.7em;
    height: 1.7em;
    border-radius: 3px;
    float: left;
    margin: 0 4px 0 0;
}

And then use this class in the logo attributes section (class=”logo-app-icon”)

Result
Apex52_logo_icon

You might want to play around with different width/height settings. 20px also worked for me.

Summary

Regardless which version of apex 5 you are working with – there is an easy way to use an icon or an image together with some text as the logo line.

Currently Apex 5.2 is still in its early adopter phase. So there is an unlikely chance that this feature will not make it into the final product. Or that there are some small changes.

Advertisements

4 thoughts on “Apex 5.0-5.2 – Logo Text with Icon

    • It is difficult to help if one can see what is going on. I suggest to create an example on apex.oracle.com (or apexea.oracle.com). Then publish the result in the OTN apex forum including access to your workspace.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.