Vaadin 7 with FontAwesome 4.1.0

Bryson · July 30, 2014, 12:48am

I (very badly) wanted some of the newer FontAwesome icons not currently packaged in Vaadin, so I wrote my own enum to include them and enhance Vaadin’s native functionality.

The enum implements com.vaadin.server.FontIcon, so it works just like the existing implementation with a few modifications. You can use setIcon() with it as expected, but I’ve also added a getLabel() method that returns a label with all of the fancy FontAwesome modifier classes available. You can chain methods like setSize2x(), setBorder(), setPullLeft(), etc. to set the modifiers. For example:

content.addComponent(FontAwesome.COG.setSize3x().spin().getLabel());

You can also stack icons (with their own separate modifiers) like so:

content.addComponent(FontAwesome.TWITTER.stack(FontAwesome.SQUARE_O).setSize3x().getLabel());

All that is required is to download FontAwesome 4.1.0 into your theme directory and update it’s location in the enum (if required):

private static final ThemeResource fontAwesomeSource = new ThemeResource("font-awesome-4.1.0/css/font-awesome.min.css");

Enjoy!

-Bryson
15707.java (22.3 KB)

Bryson · August 4, 2014, 7:39pm

Please excuse the first draft above, it was a poor design choice to implement modifier methods on an enum as those changes become global, anywhere the icon is used

To fix that I’ve created a FontAwesomeLabel class. The usage has slightly changed:

content.addComponent(FontAwesome.TWITTER.getLabel().stack(FontAwesome.SQUARE_O).setSize3x());The theme resource variable was moved into FontAwesomeLabel, so change it there!

If you’ve used this drop a comment and let me know what you think! I may publish this to the Vaadin Directory if you guys think it’s useful.

-Bryson
15719.java (4.54 KB)
15720.java (18.9 KB)

Raymond15 · August 6, 2014, 1:13am

Your Enum and Label work great! I had trouble getting them to work with the code snippet you have above, but with a slight tweak to my implementation, I had the little cog spinning like a top!

[font=courier new] HorizontalLayout top = new HorizontalLayout(); final FontAwesomeLabel labelIcon = new FontAwesomeLabel(FontAwesome.COG).setSize3x().spin(); labelIcon.applyChanges(); top.addComponent(titleIcon); [/font](I think the critical line I was missing was the applyChanges() method.)

Thanks for the work on the great interface!

~ Ray

Iyad3 · August 7, 2014, 3:37pm

This is pretty neat. Can the modifiers be applied for Button icons as well, or is this useful for static labels only?

Bryson · August 7, 2014, 8:00pm

Good catch @Raymond, I ran into that too. It should have been added to the attach listener to begin with - attached is the fix.

Right now this only works for labels and you can’t use the modifiers with setIcon(). Vaadin natively displays font icons as a unicode character instead of CSS styling, so I’m not sure that it would be possible to implement either…
15747.java (4.5 KB)

Raymond15 · August 8, 2014, 5:12am

Actually it does work with Buttons - haven’t tried with other components yet, but to implement on a button, you just use the FontAwesome class by itself like this:

Button testButton = new Button("Test Me!", FontAwesome.COG);

You’ll get a button with the label “Test Me!” and a cog to the left of it.

Bryson · August 8, 2014, 2:00pm

Raymond Hedgecock:

Actually it does work with Buttons - haven’t tried with other components yet, but to implement on a button, you just use the FontAwesome class by itself like this:
Button testButton = new Button("Test Me!", FontAwesome.COG);
You’ll get a button with the label “Test Me!” and a cog to the left of it.

Right, it does work with buttons, however you can’t use the modifiers in this way. For example:

Button testButton = new Button("Test Me!", FontAwesome.COG.spin());

Will fail miserably

Bryson · September 12, 2014, 10:12pm

Added this to the Vaadin Directory:
http://vaadin.com/addon/fontawesomelabel

Also created a GitHub project:
https://github.com/bdunn44/FontAwesome-Vaadin

Rendy · December 29, 2014, 7:02am

hai mate. i want to ask.
I use your add ons, coz when i use FontAweson vaadin server is out of date. i need some icon from v. 4.2.
when i try, the icon didn’t show up. i use ‘FontAwesome.LINE_CHART’ but nothing to show. when i debug, i can get the enum object.

can you help me, what i must do?

Bryson · December 29, 2014, 3:34pm

Sure, happy to help. I tested the LINE_CHART icon on my machine and it works. Can you post some code that reproduces the issue?

Bryson

Rendy · December 30, 2014, 2:13am

hmm… i feel if i code correctly… it’s so strange…
the BAR_CHART can show, but the LINE_CHART or PIE_CHART can’t show…

Button lineChart = new Button();
lineChart.setIcon(FontAwesome.LINE_CHART);

it’s like the enum cant find the specific icon, how to check the fontAwesome version?

Bryson · December 30, 2014, 7:59pm

I see! The problem is that a reference to the FontAwesome 4.2.0 stylesheet (which comes with the addon) is not added to the page when setIcon() is used.

Until I can release a new version with a fix you can manually add the CSS reference like this:

Page.getCurrent().getStyles().add(new ThemeResource("../../addons/font-awesome-4.2.0/css/font-awesome.min.css"));

Thank you for finding this bug!!

Bryson

Rendy · December 31, 2014, 1:59am

Amazing it works!
Thanks mate.

I will wait the new version.

Thank You very much

Bryson · December 31, 2014, 8:44pm

Released version 1.1.3 which should address this issue. I changed the way that styles were included by using the addons.scss file in the theme directory. The Font Awesome styles should now be compiled along with your theme.

If you have a chance give it a try and let me know how it works!

Bryson

EDIT: The workaround posted above will still work if you reference the new stylesheet like Sebastien does below.

Sebastien32 · January 2, 2015, 9:02am

Hello All,

First of all, many thanks for this great addon.
I have an issue (can’t be the only one here, probably related to Eclipse plugin like you mention in your github readme.
If I compile widgetset and theme, I don’t get any display from the addon’s icons.
In my theme I double checked the addon.scss, and the mytheme.scss, they all shows like in the github readme.
I also checked the generated styles.css in my theme, it starts with FontAwesome addons lines…

As a workaround, if I add Page.getStyles().add(new ThemeResource(“…/…/addons/font-awesome-4.2.0/css/_font-awesome.scss”)); to my code, all icons show up !

Can anybody point me to something I should check ?

Regards
Sébastien

Bryson · January 2, 2015, 3:38pm

Hi Sebastien,

I was afraid that addons.scss would cause problems!

Did you edit ‘mytheme.scss’ or ‘styles.scss’? That may be the issue. Make sure to add the import and include to ‘styles.scss’.

If you’ve done that could you post example SASS files that reproduce the issue? The generated styles.css would also be helpful. What version of Vaadin are you running?

-Bryson

Bryson · January 2, 2015, 4:56pm

I created a ticket for this (
http://dev.vaadin.com/ticket/15500
). It looks like the configuration for the Eclipse plugin (Project > Properties > Vaadin) has a minor bug with the “Suspend automatic addon theme scanning” property. To fix the automatic updating of addons.scss, try to Check > Apply > Uncheck > OK this checkbox. I tested this with two projects and it worked for me!

EDIT: Also check that the following build commands are in your .project file:

<buildSpec>
    ...
    <buildCommand>
        <name>com.vaadin.integration.eclipse.widgetsetBuilder</name>
        <arguments>
        </arguments>
    </buildCommand>
    <buildCommand>
        <name>com.vaadin.integration.eclipse.addonStylesBuilder</name>
        <arguments>
        </arguments>
    </buildCommand>
</buildSpec>

Accelinn · January 22, 2015, 9:37am

Hi,

Just to say that recently, there is an error at vaadin:compile :

[ERROR]
 janv. 22, 2015 10:36:13 AM com.vaadin.sass.internal.tree.MixinNode traverse
[ERROR]
 Grave: null
[ERROR]
 com.vaadin.sass.internal.parser.ParseException: Mixin Definition: _font-awesome not found
[ERROR]
     at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:42)
[ERROR]
     at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
[ERROR]
     at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
[ERROR]
     at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverse(TemporaryNode.java:71)
[ERROR]
     at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixinNode(MixinNodeHandler.java:75)
[ERROR]
     at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:45)
[ERROR]
     at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:34)
[ERROR]
     at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:115)
[ERROR]
     at com.vaadin.sass.internal.visitor.BlockNodeHandler.traverse(BlockNodeHandler.java:68)
[ERROR]
     at com.vaadin.sass.internal.tree.BlockNode.traverse(BlockNode.java:119)
[ERROR]
     at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:213)
[ERROR]
     at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:200)
[ERROR]
     at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:270)
[ERROR]
     at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:239)
[ERROR]
     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:58)

I followed all indications on github …

Bryson · January 22, 2015, 5:57pm

I’ve never seen that before… Have you tried this solution on StackOverflow?

http://stackoverflow.com/questions/27716171/error-when-to-compile-my-theme-with-vaadin-7-3-and-valo-theme

malcolm4 · January 22, 2015, 7:40pm

Just an fyi. I’ve entered a maven build issue at

https://github.com/bdunn44/FontAwesome-Vaadin/issues/1