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
Amazing it works!
Thanks mate.
I will wait the new version.
Thank You very much
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.
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
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
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>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 …
I’ve never seen that before… Have you tried this solution on StackOverflow?
Just an fyi. I’ve entered a maven build issue at
https://github.com/bdunn44/FontAwesome-Vaadin/issues/1
Unfortunately newest fonts don’t work for me 
(See screanshot)
Very nice @Bryson Dunn, thanks for the work.
I will try to do the same for an icon set related to meteo icons (wind, clouds, sun, storms…). I will use the same approach
Cheers
Fran
@Agata Vackova what version of Vaadin are you using? Did you recompile your theme?
Thanks @Francisco Serrano! If you would like to add those icons to this project feel free to contribute on GitHub. It might save you a lot of re-work and should be fairly straight-forward.
Bryson
I use Vaadin 7.3.8 and theme from another jar (the project does not contain any .scss file), so when I try to compile theme, Vaadin plugin wants me to select theme file instead of compiling anything.
That’s the problem and is a limitation of the addons.scss file approach - you’re project needs to have an .scss file so the addon styles can be compiled along with it.
I suggest manually extracting the theme files from the jar and putting them in your project’s theme directory. That way you’ll get the best of both worlds - you can still use the theme included in the jar and also compile the addons.scss file along with it. Keep in mind that you’ll need to replace the theme files in your project and re-compile if you upgrade to a new jar version.
Bryson
My theme file:
[code]
@import “…/PSETheme/PSETheme.scss”;
@mixin OsobyTheme {
@include PSETheme;
}
[/code]and addons:
[code]
/* This file is automatically managed and will be overwritten from time to time. /
/ Do not manually edit this file. */
/* Provided by fontawesomelabel-1.1.8.jar */
@import “…/…/…/VAADIN/addons/font-awesome-4.3.0/css/_font-awesome.scss”;
/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
@include _font-awesome;
}
[/code]It works now.
Thank you.
Hi,
minor question here: it seems that a stacked icon does inherit the size of its predecessor, is this correct?
Is it technically possible to set the first icon larger, and keep the stacked icon at the default size?
I tried to do it in the online demo, but I did not manage to get this working (see attachment)
Yes, that’s true. When stacking the base icon’s size takes precedence, which is set on the out stack span. For example:
FontAwesome.SQUARE.getLabel().setSizeLg().stack(FontAwesome.TERMINAL.getLabel().setSize6x().inverseColor()).reverseStackSize();
Produces:
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-inverse fa-stack-1x"></i>
</span>
It’s not currently possible to individually maintain sizes for each stacked icon, and looking at the CSS under the covers I’m not sure that the Font Awesome styles would support it, either.
I did find a minor bug while checking this out - so thanks for that! If you have any suggestions on how to implement what you’re looking for feel free to leave them here or send a pull request in GitHub.
-Bryson
UPDATE: Version 1.2.0 released for the mentioned bug.
I did not manage to look into it yet, just checking out the possibilities of icon usage withing vaadin.
But I got another question/feature request:
I came acros this site:
http://l-lin.github.io/font-awesome-animation/
Using the provided CSS it is possible to set animations on the icons at the point of hovering them/hovering their parent.
As I said I did not manage to look into your code, so I do not know how hard it would be to integrate this (like e.g. adding methods onHover(Animation, Speed); onParentHover(); or something similar). But i guess you are also just using some css for the stacking and animation (looking at the few lines in the post before).
What do you generally think of this idea and if you like it, how hard do you think would it be to implement? Eventhough I guess it would not work for the usage on Buttons etc.
Thank you anyway for the addon, it seems very useful to me!
EDIT:
I have seen that there are a lot of CSS animation libraries out there (Animate.css, Hover.css, etc.), may be the one I mentioned isn’t “the best”. First step (of course if you ever plan to integrate such a feature) would be to find the best suited animations library (I am really not an expert regarding CSS stuff, unfortunately).
That’s a great idea, animations would make a useful addition to the addon. You’re right in your assumption that the addon works by constructing the Label html and assigning CSS classes dynamically - it shouldn’t be hard to integrate animation styles from any of the projects you mentioned. I’ll take a look at them and work on a release with animations if it’s feasible.
-Bryson
Hi Bryson,
the add-on works fine in Chrome and FF, but in IE they are not visible. Do I need to install them somehow? Please see attached screenshots.
Agata
