我正在使用自定义字体图标集，如 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(十六进制的字体系列/代码点。不允许使用十进制值)fonticon://MyFonticon/e900(有关设置自定义字体图标的信息，请参阅@Morfic的答案)
不起作用:
fonticon://INDUSTRYfonticon://FontAwesome/INDUSTRY
最佳答案
注意:在 Vaadin 7.7.3 上测试
1) 前往icomoon正如 Using font-icons wiki article 中所建议的并只选择了 1 个图标，home(注意分配的代码 e900 ，这就是我们稍后将使用的。):
2) 复制了fonts文件夹内容按照相同的教程，但将所有文件重命名为 myfont* :
3) 创建主题文件。请注意，wiki 文章与 Vaadin docs theme-font section 之间存在差异。关于@import路径，正确的是文档中的路径:
- 维基[错误]:
@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)然后创 build 计文件和组件，没什么花哨的，只是一个带有按钮的布局:
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 - 使用 Vaadin 声明式 UI 时如何设置自定义字体图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39708331/