Custom icons with ultima-layout version 1.0.7

[edison.martins]

Dear colleagues,

I'd like to use custom icons that I downloaded from www.iconfinder.com, but I'm not getting it. I am using the ultima-layout version 1.0.7.

Example:
File: handshake.png

Css:
.handshake {
background-image: url("#{resource['images/handshake.png']}") !important;
width: 16px !important;
height: 16px !important;
}

xhtml:
<p:menuitem id="handshakeId" value="Hand Shake" icon="handshake" outcome="/handshakeds"/>

Thank you in advance.

[mert.sincan]

Ultima menu uses Material icons. But, I added Font-Awesome to it. If you want to use custom icons in menu,
First solution,
You need to override/change encodeItemIcon function in UltimaMenuRenderer.java. Please try;

Code: Select all

...
    protected void encodeItemIcon(FacesContext context, String icon) throws IOException {
        if(icon != null) {
            ResponseWriter writer = context.getResponseWriter();

            writer.startElement("i", null);
            
            if(icon.contains("fa fa-") || icon.contains("iconfinder-")) {
                writer.writeAttribute("class", icon, null);
            }
            else {
                writer.writeAttribute("class", "material-icons", null);
                writer.writeText(icon, null);
            }
            
            writer.endElement("i");
        }
    }
 ...

Code: Select all

//CSS
<style type="text/css">
            .iconfinder-handshake {
                background-image: url("#{resource['ultima-layout:images/handshake.png']}");
                background-repeat: no-repeat;
                width: 24px;
                height: 24px;
            }
</style>

//XHTML
<p:menuitem id="handshakeId" value="Hand Shake" icon="iconfinder-handshake" outcome="/handshakeds"/>

Second solution;

Code: Select all

//CSS
<style type="text/css">
            .fa-handshake {
                background-image: url("#{resource['ultima-layout:images/handshake.png']}");
                background-repeat: no-repeat;
                width: 24px;
                height: 24px;
            }
</style>

//XHTML
<p:menuitem id="handshakeId" value="Hand Shake" icon="fa fa-handshake" outcome="/handshakeds"/>