font-icon addon vs. Font-Awesome version compatibility

Flow
1


Marc Englund
 has a great addon called
FontIcon
. By default it pulls
Font-Awesome
 artifacts using
CDN
. The default version is 3.0.2 but the latest version (4.0.3) does not seem to be compatible.

You bootstrap FontIcon in your UI using something like
FontAwesome.load();
 but, again, this pulls from CDN and it pulls an old version 3.0.2 of FontAwesome.

In order to avoid the CDN pull you can deploy the Font-Awesome artifacts locally under your theme directory. Then you would load it into your application with something like:

[font=courier new] FontAwesome.load(new ThemeResource("themepath/to/fontawesome.css")); [/font]. By trial and error it looks like FontIcon works nicely with Font-Awesome versions:

  • 3.0.2
  • 3.1.1
  • 3.2.0
  • 3.2.1

But FontIcon has issues with Font-Awesome versions:

  • 4.0.0+
static final String CDN_302_DEFAULT = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css";
static final String CDN_311_GOOD = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.css";
static final String CDN_320_GOOD_with_changes = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.css";
static final String CDN_321_GOOD = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css";
static final String CDN_400_BAD = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css";
static final String CDN_403_BAD = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css";
static final String FONTAWESOME_321_LOCAL = "font-awesome/3.2.1/css/font-awesome.css";
static final String FONTAWESOME_321_LOCAL_MIN = "font-awesome/3.2.1/css/font-awesome.min.css";
static final String FONTAWESOME_403_LOCAL = "font-awesome/4.0.3/css/font-awesome.css";
FontAwesome.load();  // default 3.0.2 via CDN
FontAwesome.load(new ThemeResource(FONTAWESOME_321_LOCAL));  // good
FontAwesome.load(new ThemeResource(FONTAWESOME_403_LOCAL));  // ?
​

Q: If Marc is watching, how can his addon be updated to support Font-Awesome 4.0.0 and later?

Many thanks in advance!

2

Hi,

In case you are font icon fanatic, check out 7.2-SNAPSHOTs. A built in font icon support is about to be released.

cheers,
matti

3

Hello Matti,

That is exciting news.

Where can I learn about the built in font icon support in the 7.2 release?

I just pulled
7.2-SNAPSHOT
 but the system fails to compile the widgetset against the current Touchkit library.

[INFO]
       [ERROR]
 Errors in 'jar:file:/Users/username/.m2/repository/com/vaadin/addon/vaadin-touchkit-agpl/4.0.0.alpha2/vaadin-touchkit-agpl-4.0.0.alpha2.jar!/com/vaadin/addon/touchkit/gwt/client/ui/VSwipeViewIEImpl.java'

[INFO]
          [ERROR]
 Line 3: The import com.google.gwt.event.dom.client.MsPointerDownEvent cannot be resolved

[INFO]
          [ERROR]
 Line 4: The import com.google.gwt.event.dom.client.MsPointerDownHandler cannot be resolved

[INFO]
          [ERROR]
 Line 5: The import com.google.gwt.event.dom.client.MsPointerMoveEvent cannot be resolved

[INFO]
          [ERROR]
 Line 6: The import com.google.gwt.event.dom.client.MsPointerMoveHandler cannot be resolved

[INFO]
          [ERROR]
 Line 7: The import com.google.gwt.event.dom.client.MsPointerUpEvent cannot be resolved

[INFO]
          [ERROR]
 Line 8: The import com.google.gwt.event.dom.client.MsPointerUpHandler cannot be resolved

[INFO]
          [ERROR]
 Line 16: MsPointerDownHandler cannot be resolved to a type

[INFO]
          [ERROR]
 Line 19: MsPointerDownEvent cannot be resolved to a type

[INFO]
          [ERROR]
 Line 22: MsPointerDownEvent cannot be resolved

[INFO]
          [ERROR]
 Line 24: MsPointerMoveHandler cannot be resolved to a type

[INFO]
          [ERROR]
 Line 27: MsPointerMoveEvent cannot be resolved to a type

[INFO]
          [ERROR]
 Line 30: MsPointerMoveEvent cannot be resolved

[INFO]
          [ERROR]
 Line 32: MsPointerUpHandler cannot be resolved to a type

[INFO]
          [ERROR]
 Line 35: MsPointerUpEvent cannot be resolved to a type

[INFO]
          [ERROR]
 Line 38: MsPointerUpEvent cannot be resolved

[INFO]
    [ERROR]
 Aborting compile due to errors in some input files

Thanks again Matti

4

Hi,

Check out FontAwesome class, it has built in constants for Font Awesome icon font. Then just pass them like any other std Vaadin Icon.

If you use TouchKit, and want to try it today, I guess the only method way to got is to build a development version of it too. No nightly builds for it are currently done, but building it is just a matter of “mvn install”.

cheers,
matti

5

Great news! Thank you Matti!

6

This makes me happy :slight_smile:

Hopefully this also means we can compose icons by stacking them?
Here a folder with blue background and a black outline:

<span class='fa-stack fa-lg'>
  <i class='fa fa-folder-open fa-stack-1x' style='color: blue;'></i>
  <i class='fa fa-folder-open-o fa-stack-1x' style='color: black;'></i>
</span>
7

Hi,

I have not been updating the add-on since - YES - 7.2 is getting font icon support.
I should probably update it for 7.1 use, though…

Right now, the 7.2 implementation loads FontAwesome by default, and you can use it easily with setIcon() by using the provided Enum:

button.setIcon(FontAwesome.ANDROID); This is something that the add-on can not do, BTW: in 7.2 setIcon() has been updated to support font icons.

The other way is to embed the icon in HTML (this is basically the method available in the add-on):

Label l = new Label("Android icon: " + FontAwesome.ANDROID.getHtml(), ContentMode.HTML);

We do not (yet, anyway) support stacked icons, but you can do it by constucting the HTML yourself (i.e method 2, not with setIcon()).

You can also load your own icon font (there is a helper in scss, or you can do it in css) and use that - and you’ll probably want to make your own Enum or icon factory then. The same goes if you want to minimize or customize the set of icons.

The
IcoMoon app
 is an excellent place to customize your icon font.

And PLEASE go ahead and check out the font icon support, and feel free to comment on it, so that we can make adjustments if needed.

I guess I should go ahead and write a blog post about this sooner rather than later…

Hope this helps until the blog post is availabe!

Best Regards,
Marc

8

Marc,

Thanks for the update.

John

9

Now that the 7.2 beta is out I had a look at the new FontIcon support.

I’m not an expert on either Font Awesome or Vaadin, but this implementation seem to miss the mark…

It seems the Vaadin implementation is to just show a letter from a given font.
FontAwesome however is all about doing fun things with a set of css classes…

Have a look at http://fortawesome.github.io/Font-Awesome/examples.

I can get around this in some cases by encoding a label with the correct html, which is what I do today.
However this is a hack, and doesn’t help me with icons in treetables for instance.

I tried to write my own implementation of the same interface as the Vaadin FontAwesome class:

[code]
import com.vaadin.server.FontIcon;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class TestUI extends UI {

public static class MyFontAwesome implements FontIcon {

    @Override
    public String getMIMEType() {
        return null;
    }

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

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

    @Override
    public String getHtml() {
        return "<span class='fa-stack fa-lg'>"
                + "<i class='fa fa-folder-open fa-stack-1x' style='color: blue;'></i>"
                + "<i class='fa fa-folder-open-o fa-stack-1x' style='color: black;'></i>"
                + "</span>";
    }
    
}

@Override
protected void init(VaadinRequest paramVaadinRequest) {

    VerticalLayout verticalLayout = new VerticalLayout();
    setContent(verticalLayout);
    
    Button button = new Button();
    button.setIcon(new MyFontAwesome());
    button.setCaption("Test");
    
    verticalLayout.addComponent(button);
}

}
[/code]However, I did not get the html from my getHtml() method.
Instead I got:

<span class="v-icon FontAwesome"></span> which looks like what the Vaadin FontIcon class retturns from its getHtml method.
I assume this is because there is some client-side magic that I am missing?

10

Actually, we were aiming to implement basic font icon support, not specifically FontAwesome support.

While doing this, it
did
 occur to us that it might be desireable to be able to add stylenames to each icon individually, but we opted not to implement this right now.
One of the options we realized quite late (after reading your previous post and thinking about it for a bit, I think), was that making an even more generic ‘CSSIcon’ would in fact cover a lot of different use-cases, including font icons. This might be a good idea.

Note that, in 7.2, we have to make it backwards compatible with the ‘old’ setIcon(). This put some limitations on what we can do. The ‘old’ icon is a Resource, which is not a good fit for font icons or CSS - in the future, it might make sense to make a separate Icon concept (with subclasses like FontIcon, CSSIcon, ImageIcon, …)

Yes, getHtml() is for getting html that you can embed in e.g Label. It is not used for setIcon(). The reason is that setIcon() comes with a history - it expects a Resource, not arbitrary HTML, so the client-side translates the font icon ‘resource’ into html.

Please know that your feedback is appreciated and duly noted! This is exactly the type of feedback we’re looking for with alpha and beta releases (but seldom get).

I can’t promise we’ll have support for your use case in 7.2 final, but we’ll certainly look consider this closely, and try to address this asap.
…I’ve been thinking about the options myself, and might end up making a proof-of-concept to push the issue… :wink:

Anyway, thanks for the feedback, keep it coming!

Best Regards,
Marc

11

Hi Marc,

Any changes to API to allow for finer grained manipulation of FontAwesome icons, e.g. apply 2X modifer, etc.

Thanks

12

Hi,
No API changes for that, but it is basically just CSS, so you can easily do it your self as outlined below.

I made a scss (available here for now:
font-awesome-variants.scss
) with only the Font Awesome ‘variants’ CSS, slightly modified to work with Vaadin font icons. Put it in your application’s
themes
 folder, the include it in
styles.scss
:

.yourtheme { @include addons; @include fonticondemo; @import 'font-awesome-variants'; } Now you can use the variants by adding a stylename to the component:

Button b = new Button("Variant"); b.setIcon(FontAwesome.BOOKMARK); b.addStyleName("fa-3x"); layout.addComponent(b); Voila!

Note that stacking does not work with
setIcon()
 (only in HTML), and spin did not seem to work (but I did not investigate yet).

I’m thinking I could package this as a new version of my FontIcon add-on (with a companion java enum containing the available variants).

Or we might consider including this in the core Font Awesome support…

Best Regards,
Marc

13

Thanks Marc. Good stuff!

14

Hmm, didn’t know the Vaadin Sass compiler allowed you to do this. It shouldn’t since the Ruby Sass compiler would throw an error from this (all imports should be on the top level). Unless, of course, you meant ot write @include instead.

15

Spinning probably failed because the Vaadin Sass compiler doesn’t recognize @keyframes rules properly (at least that was a problem a little while ago), so those probably end up wrong in the output CSS. A workaround for that is to use a regular .css import, which will not go through the Sass compilation.

16

Hi Jouni,
Is there an easy way to disable automatic FontAwesome support in Vaadin?. I’d prefer to embed our own version of FA that isn’t tied to Vaadin and just use plain old tags.

I’m using a regular CSS import as you suggested but I noticed that it is still downloading the Web Font from the Vaddin theme abd I’m worried about version compatibility (e.g. we are using 4.1.0). I’m seeing some issue with IE9. I think it has to do with security settings. It works on one workstation but fails on a co-workers. We are both running the same version of IE9. Interesting part is he is able to see the FA sample site just fine but not our site.

Thanks
17

As far as I can tell, this is fine - as long as you don’t do it in a mixin, or use directives that can’t be nested:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested-import

18

Hi,

At the moment, as far as I can tell, disabling FontAwesome seems to require a lot of copy&pasting, OR removing the @font-face from your final styles.css - easy, but you need to re-do when you re-compile :frowning:
We should fix this (Valo seems to have the mechanism in place, but not yet enabled for FontAwesome in the alpha).

However - the browser should not download the font files unless you’re actually using the font, so I’m wondering: 1. Which browser(s) are you seeing this behaviour in? 2. Are you by any chance using the same .FontAwesome stylename for your own version of FontAwesome?
19

I too am looking to disable built-in Font Awesome as I am using the latest FontAwesome 4.1, which is not used in Vaadin.
I am using the forked Fonticon plugin.

Enabling and disabling this feature would be great.

20

I would guess not. Vaadin now uses these icons themselves, at least in the Valo theme.

I am using both this and my own fork of FontAwesome, without any problems.