Vaadin Menüleiste, Platz zwischen Überschrift und Symbol für einen Artikel

Question

Ich habe eine Menüleiste mit einigen Elementen. Jeder Gegenstand hat eine Beschriftung und ein Symbol. Problem ist, dass die Beschriftung und das Symbol sehr nahe beieinander liegen. Hier ist es:

Wie kann ich etwas Abstand zwischen Titel und Symbol setzen?

Das ist mein einfacher Code:

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) 

und CSS:

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

Answer 1

Sie haben ein bisschen mehr CSS für Ihr Icon-Element hinzuzufügen:

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

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

Wenn Sie Wenn Sie SASS verwenden, müssen Sie das Thema erneut kompilieren und den Browser-Cache möglicherweise neu laden, damit die Änderungen wirksam werden.

Screenshot of my local working example