如何输出带有图标的标签？

Question

当我使用setIcon()时，标签的文字在下一行跳转。如何在一行中输出？

Label info = new Label("Reports are generated every day at 5 pm", ContentMode.HTML);
info.setIcon( new ThemeResource("img/icons/information.png") ) ;
info.setSizeUndefined();
JobsLayout.addComponent( info );
JobsLayout.setComponentAlignment(info, Alignment.MIDDLE_RIGHT);

Answer 1

您可以在标签文字内使用图标：

Label date = new Label(FontAwesome.CALENDAR.getHtml() + " " + new Date());
date.setContentMode(ContentMode.HTML);

来源：Vaadin Wiki。

结果：

Answer 2

你应该试试这个：

info.addStyleName("line");

使用这个CSS：

.v-caption-line {
    display: inline !important;
}

Answer 3

我遇到了同样的问题，并在最后使用了以下“解决方案”。优点是如果您在彼此下方使用多个标签，则它们在图标和文本之间具有相同的空间。

Vaadin代码

Button label = new Button("Your label text here.");
label.setIcon(FontAwesome.USER);
label.addStyleName(ValoTheme.BUTTON_BORDERLESS + " labelButton");

CSS代码

.labelButton:after, .labelButton:active {
    content: none;
    border: none;
    color: #000000;
}

.labelButton {
    cursor: default;
}

Answer 4

它也可能是标签，您可以尝试使用内联CSS，因为您已经将内容类型指定为HTML，它应该是这样的： Label info = new Label("<span style=\"dispaly: inline;\">Reports are generated every day at 5 pm</span>", ContentMode.HTML);

如果这不起作用，请尝试使用与标签关联的div执行相同的操作 - 或 - 您可以在范围内使用内联CSS注入图标。