Custom font icons (Vaadin 7)

Vaadin 6 / 7 / 8
1

Hi, I’m trying to use custom font-icons instead of FontAwesome or Vaadin icons.

I’ve followed these steps: https://vaadin.com/docs/v7/framework/themes/themes-fonticon.html
And watched this video: https://www.youtube.com/watch?v=1TbpBSHbRKs

Here’s my code and attached an image of the working directory.

mytheme.css

@import "../valo/valo.scss";

@include v-font(IcoMoon, '../../mytheme/fonts/icomoon');

@mixin mytheme {
  @include valo;
}

IcoMoon enum

public enum IcoMoon implements FontIcon {
	
	LIFEBUOY(0xe941);

	private int codepoint;
	
	IcoMoon(int codepoint) {
		this.codepoint = codepoint;
	}
	
	@Override
	public String getMIMEType() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public String getFontFamily() {
		return "IcoMoon";
	}

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

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

}

Implementation in a Label

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        Label testText = new Label("Test text. " + IcoMoon.LIFEBUOY.getHtml() + " wow dun ");
        testText.setIcon(IcoMoon.LIFEBUOY);
        testText.setContentMode(ContentMode.HTML);
        
        
        layout.addComponent(testText);
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

17127362.png
17127365.png

2

Nevermind, I fixed the problem after a long search.

  • Make sure you disable caching in your browser when refreshing the webapplication.
  • The scss import is in styles.scss like this for me:

@include v-font(IcoMoon, '../../../../mytheme/fonts/icomoon/icomoon');

  • Also in the FontIcon implementation you can write the getHtml method like this:
	@Override
	public String getHtml() {
		return GenericFontIcon.getHtml(FONT_FAMILY, this.codepoint);
	}