使用 Vaadin 声明式 UI 时如何设置自定义字体图标? [英] How to set custom font icon when using a Vaadin declarative UI?
问题描述
我正在使用维基文章中描述的自定义字体图标集
2) 按照同一教程复制 fonts 文件夹内容，但将所有文件重命名为 myfont*:
3) 创建主题文件.请注意，wiki 文章与
7) 奖励 - 为组件打印声明格式:您可以通过至少两种简单的方式来实现
a) Design.write(this, System.out);
b)
I am using a custom font icon set as described at the wiki article Font icons in Vaadin 7.2. Everything works fine.
However, if I use the declarative UI I am not able to get it working.
This is my code so far:
<vaadin-panel caption="..." style-name="..." icon="fonticon://IcoCustom/58884" size-full>
UPDATE
Allowed syntax:
font://INDUSTRY(deprecated syntax, assumes FontAwesome font icon)fonticon://FontAwesome/f275(font family/codepoint in hex. decimal values not allowed)fonticon://MyFonticon/e900(for setup custom font icons see @Morfic's answer)
Does not work:
fonticon://INDUSTRYfonticon://FontAwesome/INDUSTRY
Note: Tested on Vaadin 7.7.3
1) Went to icomoon as suggested in the Using font-icons wiki article and selected only 1 icon, home (Notice the assigned code e900, that's what we'll use later.):
2) Copied the fonts folder content as per the same tutorial, but renamed all the files to myfont*:
3) Created the theme files. Notice that there is a discrepancy between the wiki article, and the Vaadin docs theme-font section regarding the @import path, the correct being the one from the docs:
- wiki [wrong]:
@include font(IcoMoon, '../../fonticondemo/fonts/icomoon'); - docs [right]:
@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) Then created the design file and component, nothing fancy, just a layout with a button:
java
@DesignRoot
public class MyDeclarativeComponent extends VerticalLayout {
public MyDeclarativeComponent() {
Design.read(this);
}
}
html (notice the e900 code used)
<!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) Optional enum, shamelessly copied from the Vaadin implementation of FontAwesome
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) And a basic UI implementation:
@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) Result:
7) Bonus - printing declarative format for a component: you can to this in at least 2 simple ways
a) Design.write(this, System.out);
b) Vaadin debug mode - use the included tool to print the design to your console
这篇关于使用 Vaadin 声明式 UI 时如何设置自定义字体图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
