Vaadin 7 with FontAwesome 4.1.0

Flow
8

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

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

9

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?

10

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

11

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?

12

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

13

Amazing it works!
Thanks mate.

I will wait the new version.

Thank You very much

14

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.

15

Hello All,

First of all, many thanks for this great addon.
I have an issue (can’t be the only one :wink: 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

16

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

17

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>
18

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 …

19

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

20

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

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

21

Unfortunately newest fonts don’t work for me :frowning: (See screanshot)
19014.png

22

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

23

@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

24

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.

25

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

26

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.

27

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)

19053.png