Vaadin 菜单栏，项目的标题和图标之间 space

Question

我有一个包含一些项目的菜单栏。每个项目都有一个标题和图标。问题是标题和图标彼此非常接近。这是：

如何在标题和图标之间设置一些 space？

这是我的简单代码：

MenuBar menuBar = new MenuBar();
menuBar.setSizeFull();
menuBar.addStyleName(CSS.commom-menu-bar);
menuBar.addItem("import", VaadinIcons.DOCTOR,(selectedItem) ->  importDocs());
HorizontalLayout menuBarLayout = new HorizontalLayout(menuBar);
menuBarLayout.setWidth("100%");
setContent(menuBarLayout)

和css：

.v-menubar-common-menu-bar{
direction: rtl;
text-align: right !important;
}

Answer 1

您必须为您的图标元素添加更多 CSS：

.v-menubar-commom-menu-bar{
    direction: rtl;
    text-align: right !important;
}

.v-menubar-commom-menu-bar .v-icon
{
    padding-left: 10px;     
}

如果您使用 SASS，您还必须重新编译主题并可能重新加载浏览器缓存以使更改生效。

Screenshot of my local working example

Vaadin 菜单栏，项目的标题和图标之间 space

Vaadin Menu Bar, space between caption and icon for an item

css

menubar

menuitem

vaadin

vaadin8