How do you add a custom icon to a menuitem?

[jrobertsz66]

I have looked at issue 3200 and the documentation and I cannot get a custom icon to show on my menubar. I basically posted similar information for issue 3200, which is marked as Won't Fix?

I have tried following the solution for issue 3200 and it will not work for me. I don't get the image to display!

Here is my CSS:

Code: Select all

barca {
            background: url(/images/ge-logo.jpg) no-repeat !important;
            height: 25px;
            width: 25px;
        }

And here is my menuitem:

Code: Select all

<p:menuitem icon="barca" url="http://www.ge.com"/>

I get a blank area on my menubar and I can click on it and go to the http://www.ge.com url but the image is never displayed!

Also, your documentation is wrong!

This is what is included in page 272:

There are two ways to specify an icon of a menuitem, you can either use bundled icons within
PrimeFaces or provide your own via css.
ThemeRoller Icons

Code: Select all

<p:menuitem icon="ui-icon-disk" ... />

Custom Icons

Code: Select all

<p:menuitem icon="barca" ... />
.barca {
background: url(barca_logo.png) no-repeat;
height:16px;
width:16px;
}

So, the doc. doesn't even show the !important; at the end of the example, but even after adding that and spending about 5 hours on this fighting the framework and trying everything I could think of I could not get my icon to display.

Is there a bug in the code? BTW, I am using yesterday's download of PF 3.3.1

BTW, when I go to this URL in the browser, to verify the image is there, that works so I know it is not related to a missing image:

http://localhost:8080/webui/images/ge-logo.jpg

Also, I have tried multiple combinations for the image path from the page where I have the CSS and menuitem.

I have tried this so far and none of them work!

/images/ge-logo.jpg
../images/ge-logo.jpg
../../images/ge-logo.jpg

Issue 3200 used /images/imageName but in my case my xhtml page which includes the CSS and menuitem is located under pages so I think the path may have to be ../../images/ge-logo.jpg but that doesn't work also.

I think you guys have a bug in the code or the doc. Either way please let me know if and how it can be resolved. The whole reason I am trying to do this is because I want to include a Logo on the top left of my menubar and I also could not find a way to do that so I ended going with the menuitem with custom icon approach but that doesn't work also.

[cagatay.civici]

So, the doc. doesn't even show the !important; at the end of the example, but even after adding that and spending about 5 hours on this fighting the framework and trying everything I could think of I could not get my icon to display.

!important is evil, make sure you order your css properly.

3200 is wontfix because it is not a PrimeFaces bug, you need to override css properly to display your icon.

http://www.vanseodesign.com/css/css-spe ... -cascaade/

Also, your documentation is wrong!

Nope!

You can add some more rule;

Code: Select all

.ui-menuitem-icon.barca {
   your stuff
}

[jrobertsz66]

Hi Optimus,

Thanks for your reply. Could you please be so kind as to help me out a little more with this one?

I am still not able to get this to work.

Here is my CSS on the main.xhtml page:

Code: Select all

<h:head>
        <title>CNMS</title> 
        <style type="text/css">                
        .ui-widget, .ui-widget .ui-widget {
            font-size:10px;
        }
        .ui-tabs .ui-tabs-nav li{
            float:right!important;
        }
        .ui-growl {   
            position:fixed;
            top: 60%;
            left: 40%;
            width: 360px;
            height: 110px;
            z-index:9999; 
        }
        .whiteSpaceClass {
            white-space: pre-wrap;
        }
        .ui-menuitem-icon.barca {
            background: url(/images/ge-logo.jpg) no-repeat !important;
            height: 25px;
            width: 25px;
        }
        .noWrapClass {
            word-wrap: normal;
        }
        </style>
        <h:outputScript library="primefaces" name="gmap/gmap.js"/>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
    </h:head>

And here is my code for the menuItem:

Code: Select all

<p:menuitem icon="ui-menuitem-icon.barca " url="http://www.ge.com"/>

I get a blank rounded square on the toolbar without any image on it and just an ^ arrow instead of the image.

I don't know what is it that I need to do to fix this. The image is in the images directory and can be accessed via direct URL but it never displays on the menubar.

If I switch the URL path and just add important for the image like this:

Code: Select all

 .ui-menuitem-icon.barca {
            background: url(/images/ge-logo.jpg) !important;
            height: 25px;
            width: 25px;
        }

And then use the menuItem tag like this:

Code: Select all

<p:menuitem icon="barca " url="http://www.ge.com"/>

Then the ^ arrow doesn't display but I get what appears to be a black square with rounded corners on it where the image should go, but no image.

I am using the vader theme, if that helps any.

Thanks a lot in advance,

Joe

[jrobertsz66]

OK, solved.

Chrome helped.

Inspecting the component revealed that this path /images/ge-logo.jpg

resolved to http://localhost:8080/images/ge-logo.jpg

changing the path to images/ge-logo.jpg worked.

Here is the final CSS and menuitem:

Code: Select all

.ge-icon {
            background: url(images/ge-logo.jpg) no-repeat !important;
            height: 50px;
            width: 50px;
        }

<p:menuitem icon="ge-icon" url="http://www.ge.com"/>

Thanks Optimus.

Take care!