Question

某些版本的Vaadin内置了FontAwesome。后来Vaadin带来了自己的图标集。

我如何使用Vaadin 8中的任何一个？

随着对Vaadin Flow（Vaadin 10+）的重新强调以及使用Web Components重新实施，我无法找到有关如何使用这些Vaadin 8兼容字体源的任何文档。

如何在Vaadin 8布局中方便地将一些大图标显示为小部件？

Answer 1

有关于font icons和VaadinIcons以及creating your own font icons的一些8.x文档。

使用它们就像new Button("Add", VaadinIcons.PLUS);一样简单，但你提到了一些关于一些大图标的东西，你没有开箱即用AFAIK。

但是，基于上述文档，快速而肮脏的解决方案是使用标签和一些样式：

<强>主题：

.big-icon .v-icon{
   font-size: 300px;
 }

<强>代码：

public class Icon extends VerticalLayout {
    public Icon() {
        Label image = new Label();
        image.setContentMode(ContentMode.HTML);
        image.setValue(VaadinIcons.EYE.getHtml());
        image.addStyleName("big-icon");
        addComponent(image);
    }
}

<强>结果：

显然你可以继续使用 madness ，并创建一个稍微灵活的标签，不需要修改样式，并且可以在runtim上更新。有点像：

public class Icon extends Label {
    private static final String CONTENT = "<span class=\"v-icon v-icon-%s\" style=\"font-family: %s; color: %s; font-size: %spx;\">&#x%s;</span>";
    private Color color;
    private int size;
    private VaadinIcons icon;

    public Icon(VaadinIcons icon) {
        this(icon, Color.BLACK, 16);
    }

    public Icon(VaadinIcons icon, Color color, int size) {
        this.icon = icon;
        this.color = color;
        this.size = size;
        setContentMode(ContentMode.HTML);
        updateIcon();
    }

    public void setIcon(VaadinIcons icon) {
        this.icon = icon;
        updateIcon();
    }

    public void setSize(int size) {
        this.size = size;
        updateIcon();
    }

    private void updateIcon() {
        setValue(String.format(CONTENT,
                icon.name(),
                icon.getFontFamily(),
                color.name(),
                size,
                Integer.toHexString(icon.getCodepoint())));
    }

    public void setColor(Color color) {
        this.color = color;
    }

    public enum Color {
        BLACK, GREEN
    }
}

myLayout.addComponents(new Icon(VaadinIcons.PLUS), new Icon(VaadinIcons.INFO, Icon.Color.GREEN, 200));导致的地方：

可能会有更优雅的解决方案，但这是我进行头脑风暴的原因，因为到目前为止我还没有这样的需求。我总是使用带有按钮和标签的常规尺寸图标。无论如何，希望这可以让你开始。

在Vaadin 8中显示大图标

1 个答案: