使用 Vaadin 声明 UI 时如何设置自定义字体图标？

Question

我正在使用 wiki 文章 Font icons in Vaadin 7.2 中所述的自定义字体图标集。一切正常。

但是，如果我使用声明式 UI 我无法让它工作。

到目前为止，这是我的代码：

<vaadin-panel caption="..." style-name="..." icon="fonticon://IcoCustom/58884" size-full>

更新

允许的语法：

font://INDUSTRY（已弃用语法，采用 FontAwesome 字体图标）
fonticon://FontAwesome/f275（十六进制字体 family/codepoint。不允许十进制值）
fonticon://MyFonticon/e900（有关设置自定义字体图标的信息，请参阅@Morfic 的回答）

不有效吗：

fonticon://INDUSTRY
fonticon://FontAwesome/INDUSTRY

Answer 1

注意： 在 Vaadin 7.7.3 上测试

1) 前往 icomoon as suggested in the Using font-icons wiki article 并仅选择了 1 个图标，主页（注意分配的代码 e900，我们稍后将使用它。）：

2) 按照相同教程复制 fonts 文件夹内容，但将所有文件重命名为 myfont*：

3) 创建主题文件。请注意，wiki 文章与关于 @import 路径的 Vaadin docs theme-font section 之间存在差异，正确的是文档中的那个：

wiki [错误]：@include font(IcoMoon, '../../fonticondemo/fonts/icomoon');
文档[正确]：@include font(MyFontFamily, '../../../../mytheme/fonts/myfontfamily');

styles.scss

@import "mytheme.scss";

@include font(myfont, '../../../../mytheme/fonts/myfont');

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in mytheme.scss */
.mytheme {
  @include mytheme;
}

mytheme.scss

@import "../valo/valo";

@mixin mytheme {
  @include valo;
}

3) 然后创建设计文件和组件，没什么特别的，只是一个带有按钮的布局：

java

@DesignRoot
public class MyDeclarativeComponent extends VerticalLayout {
    public MyDeclarativeComponent() {
        Design.read(this);
    }
}

html（注意使用的 e900 代码）

<!DOCTYPE html>
<html>
    <body>
        <com_example_declarative_font-my-declarative-component>
            <vaadin-button icon="fonticon://myfont/e900" plain-text>My button</vaadin-button>
        </com_example_declarative_font-my-declarative-component>
    </body>
</html>

4) 可选枚举，无耻地从 FontAwesome

的 Vaadin 实现中复制

public enum MyFont implements FontIcon {
    HOME(0xe900);

    public static final String FONT_FAMILY = "myfont";
    private int codepoint;

    private MyFont(int codepoint) {
        this.codepoint = codepoint;
    }

    public String getMIMEType() {
        throw new UnsupportedOperationException(FontIcon.class.getSimpleName() + " should not be used where a MIME type is needed.");
    }

    public String getFontFamily() {
        return FONT_FAMILY;
    }

    public int getCodepoint() {
        return this.codepoint;
    }

    public String getHtml() {
        return GenericFontIcon.getHtml(FONT_FAMILY, this.codepoint);
    }

    public static MyFont fromCodepoint(final int codepoint) {
        for (MyFont f : values()) {
            if (f.getCodepoint() == codepoint) {
                return f;
            }
        }
        throw new IllegalArgumentException("Codepoint " + codepoint + " not found in FontAwesome");
    }
}

5) 和一个基本的 UI 实现：

@Theme("mytheme")
@PreserveOnRefresh
@SpringUI(path = "/")
@Title("Vaadin demo app")
public class MyUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Layout content = new VerticalLayout();
        content.setSizeFull();
        setContent(content);
        content.addComponent(new MyDeclarativeComponent());
    }
}

6) 结果：

7) 奖励 - 打印组件的声明格式：您可以通过至少 2 种简单的方式做到这一点

a) Design.write(this, System.out);

b) Vaadin debug mode - 使用附带的工具将设计打印到您的控制台

使用 Vaadin 声明 UI 时如何设置自定义字体图标？

How to set custom font icon when using a Vaadin declarative UI?

vaadin

vaadin7