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

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


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

这是我的简单代码：

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;
}

最佳答案

您必须为Icon元素添加更多CSS：

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

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

如果使用SASS，则还必须重新编译主题，并可能重新加载Browser-Cache以使更改生效。

Screenshot of my local working example