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

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

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.
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.

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

Step 2: Change the icon

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

Step 4: Save

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

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

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.

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

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.

Advertisement