Apex, How to create navigation menu with pictures?

user_2635209 0
Viewed 2429

I have an Apex application with a sidebar navigation menu like this :

enter image description here

Is possible to replace these font awesome icons by some png pictures ?

I have tried the put an image tag in the list item configuration but it didn't work : 

 <img src="#APP_IMAGES#fullheart.png"/>

The HTML generated is wrong : 

<span class="fa <img src=&quot;myapp/r/13002/files/static/v1152/fullheart.png&quot;/>"></span>

Thank you in advance.

oracle-apex oracle
1 Answers

The generated HTML is wrong because you put an HTML code into a place where APEX engine expects to find a CSS class name.

To replace a standard icon with custom one, you need to do the following:

  • Go to "Shared Components" -> "Templates", find there a page template which you are using, click on the name to edit.
  • Go to tab "Cascading Style Sheets" -> "Inline"

  • Put there a CSS code like this:

    .my_icon {
    background-image: url("#APP_IMAGES#fullheart.png");
}
  • Return to the Navigation Menu Item properties, and put the CSS class name (my_icon) into "Image/Class" property.

If you use several page templates, you need to edit all of them.

user_21412780
Related