css - 如何更改默认主页图标

Question

我的默认应用主题是 Redmond，我想通过面包屑使用不同的主页图标颜色。

我将 hot-sneaks 主题添加到 pom.xml 以使用不同的颜色。

<dependency>
        <groupId>org.primefaces.themes</groupId>
        <artifactId>hot-sneaks</artifactId>
        <version>1.0.10</version>
        <scope>compile</scope>
    </dependency>

如何更改 DefaultMenuItem 中的主页图标？

private void createHomeMenu() {
    // Create home menuItem
    DefaultMenuItem home = new DefaultMenuItem();
    home.setIcon( ?? );
    home.setAjax(true);

    breadCrumbModel.addElement(home);
}

谢谢

Answer 1

Primefaces 使用 jQuery themeroller用于样式化 UI。 Primefaces 中使用的所有图标都来自那里。因此，您可以从jquery icons中选择满意的图标。 .

public class BreadcrumbView {

    private MenuModel model;

    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();

        DefaultMenuItem item = new DefaultMenuItem("External");
        item.setUrl("http://www.primefaces.org");
        item.setIcon("ui-icon-home");
        model.addElement(item);

    }

    public MenuModel getModel() {
        return model;
    }
}

但是，您可以使用 css 样式类指定自定义图标:

public class BreadcrumbView {

    private MenuModel model;

    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();

        DefaultMenuItem item = new DefaultMenuItem("External");
        item.setUrl("http://www.primefaces.org");
        item.setIcon("xlogo");
        model.addElement(item);

    }

    public MenuModel getModel() {
        return model;
    }
}

并加载位于 resources/default/images/icons 文件夹中的图像，如下所示:

.xlogo {
    background: url('#{resource['default:images/icons/x_logo.png']}') no-repeat;
    height:16px;
    width:16px;
}