FontAwesome custom HTML for stacking text over image

Flow
1

Hi,

I’m using Vaadin
7.4.2
 with the
Valo
theme and trying to create a FontIcon based on a FontAwesome icon overlaid with some custom text. The class currenly looks like this.

public class Certificate implements FontIcon {

    private static final String FONT_FAMILY = "FontAwesome";
    private static final String HTML =
            "<span class=\"fa-stack fa-3x\">" +
            "  <i class=\"fa fa-certificate fa-stack-2x\"></i>" +
            "  <span class=\"fa fa-stack-1x certificate-value\">" +
            "    <span style=\"display: block;\">%s</span>" +
            "  </span>" +
            "</span>";

    private final String certificateLevel;

    public Certificate(final Integer certificateLevel) {
        this(String.valueOf(certificateLevel));
    }

    public Certificate(final String certificateLevel) {
        this.certificateLevel = certificateLevel;
    }

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

    @Override
    public int getCodepoint() {
        return FontAwesome.CERTIFICATE.getCodepoint();
    }

    @Override
    public String getHtml() {
        return String.format(HTML, certificateLevel);
    }

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

And call it like this

final Label certificateLabel = new Label(new Certificate(10).getHtml(), ContentMode.HTML); The issue is I do not get the icon rendered. The text is fine. Looking at the source I can see the output is as shown in the HTML.

Alternately, if I use this.

final Label certificateLabel = new Label(); certificateLabel.setIcon(new Certificate(10)); I can see the icon but not the text. I sort of understand why I cannot use this method, but can anyone help with why the first method does not display the icon?

Thanks.

2

Hi,
You shouldn’t use FontAwesome like that in Vaadin. You have 2 options in this case.

  1. Reimport FontAwesome in your css, and use it like as proposed in FontAwesome website. However, this will likely double FontAwesome resources in the browser, which is not nice.
  2. Look at FontAwesome.getHtml() method (source) and change your html like
<span class="v-icon" style="font-family: FontAwesome;">&#xf0a3;</span>

Here f0a3 corresponds to certificate icon, you can change it as you like, just look at FontAwesome enum for other icons.