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

问题

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://INDUSTRY
fonticon://FontAwesome/INDUSTRY

回答1:

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

来源：https://stackoverflow.com/questions/39708331/how-to-set-custom-font-icon-when-using-a-vaadin-declarative-ui

标签

vaadin

vaadin7