Change the icon of a custom menu item

Question

How can I set a custom icon in a nav menu item?

Answer

We use a CSS instruction to replace the icon. The following code can be in any Jahia module. 

Create the CSS file

The file will be located in the src/main/resources folder of a module. 
The menu item class to override is based on the ID of the bean that declares the menu Item, the ID is lowercased and . (dots) are replaced by - (dashes). 
For example the bean with ID Toolbar.Item.Copy will generate a class attribute value toolbar-item-copy.

Note that you can also use the browser development tools to inspect the DOM to get it. 

Given your icon has the following path: src/main/resources/images/icons/myIconImage.png. the CSS will look like:

.toolbar-item-mycustommenuitem { background-image: url('/modules/yourModule/images/icons/myIconImage.png') !important }
The url must be a valid url to an image, it could be in another module, or contains a context in case Jahia is not in ROOT context. 

Load the CSS in edit mode.

Now the CSS available, we need to load it in edit mode. To do so, we add an OSGi component that extends ModuleGWTResources to provide the location of the file to load. (see the example below)

Example

To change the icon of the "copy" button in edit mode:
Given a Jahia module named mymodule:

  1. Add a png image named myIcon.png that will be use as icon in the following directory:  src/main/resources/icons/ 
  2.  Add a CSS in your module in the following path:src/main/resources/css/override.css that contains:
    .toolbar-item-copy { background-image: url('/modules/mymodule/icons/myIcon.png') !important }
  3. Add an OSGi component to load the CSS (to enable OSGi annotation you have to delcare it in the pom.xml of your module): 
    
package org.jahia.modules.mymodule;

import org.jahia.ajax.gwt.helper.ModuleGWTResources;
import org.osgi.service.component.annotations.Component;

import java.util.Collections;
import java.util.List;

@Component(immediate = true, service = ModuleGWTResources.class)
public class CSSResource extends ModuleGWTResources {
    @Override
    public List<String> getCSSResources() {
        return Collections.singletonList("/modules/mymodule/css/override.css");
    }
}

Related links