Vaadin 菜单栏，项目标题和图标之间的空格答案

【问题标题】：Vaadin Menu Bar, space between caption and icon for an itemVaadin 菜单栏，项目标题和图标之间的空格
【发布时间】：2018-02-18 03:26:29
【问题描述】：

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

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

这是我的简单代码：

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

【问题讨论】：

你能提供你的工作代码吗？
@ankitapatel 代码现已提供！ :)
此代码没有帮助。你能分享工作的sn-p代码吗？
在文本中添加 padding-right 还是在图像中添加 padding-left？
你试过了吗：menuBar.addItem("import", action).setIcon(icon)？

标签： css vaadin menuitem menubar vaadin8

【解决方案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

【讨论】：