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
I tested in my environment (IE11) and it works. Have you upgraded from a previous version of the addon? If so you may need to clear your browser’s cache. Hopefully that works.
If not, could you send the HTML of one of those list items? Also some example code that reproduces the issue in your environment would help. What version of IE are you using?
After upgrading to 1.2.0 an many, many 
buildings it seems to work properly.
Thanks
Hi,
Thanks for making this addon. I just want to ask if there is a way to increase size when setting it as an icon. I tried to apply this on Notification object but nothing happens:
errorNotification.setIcon(FontAwesome.EXCLAMATION_CIRCLE.getLabel().setSize5x().getIcon());Right, none of the modifier methods will work with setIcon() unfortunately. Vaadin uses a hex codepoint in those cases, so there’s no way to apply any CSS styles to them.
Thanks for the reply. I managed to solve this by enabling html in Notification and explicitly add the html code. Thanks.
Hello all,
Does somebody has experience with subthemes using this add-on ?
My project has one main theme (from valo), and some subthemes (color and size variations) from the main theme.
Add-on is doing well in the main theme, but icons are not showing under subthemes.
I tried multiple tricks :
- Adding manually lines in addons.scss
- Importing …/maintheme/addons in subthemes scss
- Adding manually lines in styles.css
…
But none are working.
Regards
Sebastien