Vaadinメニューバー、キャプションと項目のアイコンの間のスペース

Question

メニューバーにはいくつかの項目があります。各項目にはキャプションとアイコンがあります。問題は、キャプションとアイコンが互いに非常に近いことです。ここにあります：

キャプションとアイコンの間にスペースを設定するにはどうすればよいですか？

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

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

あなたの場合：あなたのアイコン要素のためにもう少しCSSを追加する必要が

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

Answer 1

：

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：

これは私の単純なコードですSASSを使用する場合は、テーマを再コンパイルし、Br​​owser-Cacheを再ロードして変更を有効にする必要があります。

Screenshot of my local working example