在Vaadin中加载自己的图标字体

时间:2016-02-15 14:59:28

标签: java css fonts vaadin vaadin7

我使用IcoMoon创建了一个图标字体,并尝试按照Vaadin的说明进行use an own font

我的文件结构如下:

|VAADIN
+---themes
    +---my-theme
        +---fonts
            +---my-font-icons.ttf
            |---...
        |---addons.scss
        |---my-theme.scss
        |---styles.scss

在我的styles.scss中,我写了以下内容:

@import "addons.scss";
@import "my-theme.scss";
@include v-font(MyFontIcons, './fonts/my-font-icons');

.monitoring-theme {
  @include addons;
  @include my-theme;
}

但是我无法让字体在Java中运行。

public enum MyIconFont implements FontIcon {
    BASKET(0xe905), 
    BOOKMARK(0x6e);

    private static final String fontFamily = "MyFontIcons";
    private int codepoint;

    MyIconFont(int codepoint) {
        this.codepoint = codepoint;
    }

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

    @Override
    public String getFontFamily() {
        return fontFamily;
    }

    @Override
    public int getCodepoint() {
        return codepoint;
    }

    @Override
    public String getHtml() {
        return "<span class=\"v-icon MyFontIcons\">&#x" + Integer.toHexString(codepoint) + ";</span>";
    }

编辑:在Chrome中使用开发者控制台,看起来字体文件甚至无法加载。

.css文件是通过maven创建的,使用:

<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.1.1</version>
<executions>
    <execution>
        <phase>package</phase>
        <goals>
            <goal>java</goal>
        </goals>
        <configuration>
            <mainClass>
                com.my.PluginThemeCompiler
            </mainClass>
            <arguments>
                <argument>my-theme</argument>
            </arguments>
        </configuration>
    </execution>
</executions>

创建的.css文件位于my-theme文件夹中,但主题不包含在我的vaadin应用程序中。

有没有办法将字体加载为ClassResource并使用那里的图标?

1 个答案:

答案 0 :(得分:0)

我想您会发现v-font函数提供相对于valo主题字体目录的文件。

它应该类似于:

@include v-font(MyFontIcons, '../../../../../my-theme/fonts/my-font-icons');