css - Vaadin 菜单栏，元素的标题和图标之间的空间

Question

我有一个包含一些元素的菜单栏。每个元素都有一个标题和图标。问题是标题和图标彼此非常接近。在这里:

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

这是我的简单代码:

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