Remove FontAwesome from Vaadin theme folder?

Hi, we’re currently using Vaadin 7.3.8 and packaging our app inside a .war, and including the vaadin-themes-7.3.8.jar. We’re using some characters that are new in FontAwesome (FA) 4.2, and so we are including FA 4.2 in our themes folder, but these 4.2 characters are not displaying in our app. We assume it is because vaadin-themes-7.3.8.jar includes FA 4.1 and this version is taking precedence over the FA 4.2 that we want to use. Is this the correct assumption?

If so, is it feasible for us to hack the vaadin-themes-7.3.8.jar, i.e remove FA from it? Would Vaadin still work?
And while on the topic, we only use the Valo theme and therefore Reindeer, Liferay, etc are all superfluous. Is there an ‘offical’ cut-down vaadin themes jar that does not include these old themes (and potentially not FontAwesome either)?

Any suggestions?

Thanks

If you really need some icons from FontAwesome 4.2 be careful.
There is already a
ticket
to upgrade to 4.2, but it seems there are some problems with the presentation since FontAwesome takes 14px as standard font size and vaadin valo 16px.

Hi,

You can sure just extract the theme jar and modify the valo theme directly as well (instead of just configuring parameters). That way you can define exactly where and how varios fonts are loaded.

This is what I just recently did with my project with
Dawn
. It is pretty much just default Valo theme but hosts fonts from google font service and the fontawesome (version 4.3) from
bootstrapcdn
.

cheers,
matti

Where you said “be careful” is that because of the different font size or some other reason?

Hi Matti, the Dawn jar looks ideal - only the svg cont and no reindeer, etc… just what I was after. But how do I make use of it? I.e, what scss changes do I need to make? (I updated our build to include the dawn jar but all of the icons in our app are broken.)

I just noticed this in the output log:

Apr 14, 2015 2:48:52 PM org.apache.catalina.session.StandardSession tellNew SEVERE: Session event listener threw exception java.lang.NullPointerException at org.peimari.dawn.CdnFonts.sessionCreated(CdnFonts.java:27) at org.apache.catalina.session.StandardSession.tellNew(StandardSession.java:421) at org.apache.catalina.session.StandardSession.setId(StandardSession.java:393) at org.apache.catalina.session.StandardSession.setId(StandardSession.java:374) at org.apache.catalina.session.ManagerBase.createSession(ManagerBase.java:653) at org.apache.catalina.connector.Request.doGetSession(Request.java:2936) at org.apache.catalina.connector.Request.getSession(Request.java:2283) at org.apache.openejb.cdi.CdiAppContextsService.lazyStartSessionContext(CdiAppContextsService.java:499) at org.apache.openejb.cdi.CdiAppContextsService.getSessionContext(CdiAppContextsService.java:453) at org.apache.openejb.cdi.CdiAppContextsService.getCurrentContext(CdiAppContextsService.java:187) at org.apache.webbeans.container.BeanManagerImpl.getContext(BeanManagerImpl.java:286) at org.apache.webbeans.intercept.NormalScopedBeanInterceptorHandler.getContextualInstance(NormalScopedBeanInterceptorHandler.java:88) at org.apache.webbeans.intercept.NormalScopedBeanInterceptorHandler.get(NormalScopedBeanInterceptorHandler.java:70) etc

And later these lines:

Apr 14, 2015 2:49:26 PM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN INFO: Requested resource [/VAADIN/themes/valo/util/bourbon/css3/http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder. Apr 14, 2015 2:49:26 PM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN INFO: Requested resource [/VAADIN/themes/valo/util/bourbon/css3/http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

Any ideas what is wrong?

  1. dawn-4.jar is in the WEB-INF/lib folder… are we missing some other dependent jar?
  2. why is the system trying to load woff and ttf? I thought it wouldn’t need to do this (with the fontawesome-webfont.svg in the dawn-4.jar)?
  3. I assume that the dawn plugin would work with vaadin 7.3.8?

I just wanted to relay the information from the ticket, that some icons seem to render with unwanted visual effects in 16px.
See
here

Philip, do you have your own them that your derive from valo? Somehow one variable seems to be in a different position that with me. I made a “shot in the dark”, so this might be fixed now in version 5, give it a try.

The version 5 is built against 7.4.3, but it probably works ok with 7.3 series as well. If you want to be sure everything works correctly, check out the project, change
the vaadin version from the build
to match your vaadin version and build a custom version for your use.

cheers,
matti

I just rebuilt with dawn-5 and unfortunately the same problems occur :frowning:

Yes we have our own theme (and a bunch of scss) that extends valo. It works fine with the standard vaadin-themes-7.3.8.jar :wink:

BTW, as I mentioned, I wonder if we are missing some dependency, jar or similar? (We’re not using Maven/Ivy, we are building ‘traditionally’ with ant, including building our .war because we have a lot of other pre-existing code [none of it using vaadin or font-awesome, however - this is our first vaadin project]
.)
So do we need some jar to resolve that NPE (in org.peimari.dawn.CdnFonts.sessionCreated(CdnFonts.java:27))?

Hi Again,

I thought I’d start from scratch with the standard vaadin-themes-7.3.8.jar. I removed all themes (chameleon, liferay, reindeer, runo), leaving only valo, and the app still works ok (i.e shows icons ok) - no surprise.
I removed *.ttf and *.eot… icons still ok.
Then I removed fontawesome-webfont.woff and all icons broke.

It’s becoming clear the app wants the browser to use the .woff font; it breaks without it (either when I use my cut-down jar or the dawn-5.jar), and this is what I need to resolve. I want the app to only suggest one form (.svg) of font.

I noticed in my styles.css (generated from scss) this code:
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url(…/valo/util/bourbon/css3/…/…/…/…/base/fonts/fontawesome-webfont.eot);
src: url(…/valo/util/bourbon/css3/…/…/…/…/base/fonts/fontawesome-webfont.eot?#iefix) format(“embedded-opentype”), url(…/valo/util/bourbon/css3/…/…/…/…/base/fonts/fontawesome-webfont.woff) format(“woff”), url(…/valo/util/bourbon/css3/…/…/…/…/base/fonts/fontawesome-webfont.ttf) format(“truetype”), url(…/valo/util/bourbon/css3/…/…/…/…/base/fonts/fontawesome-webfont.svg#FontAwesome) format(“svg”);
}

I assumed that was generated because fonts.scss declares in VAADIN\themes\base\fonts\fonts.scss:

src: url(‘#{$file-name}.eot?#iefix’) format(‘embedded-opentype’), url(‘#{$file-name}.woff’) format(‘woff’), url(‘#{$file-name}.ttf’) format(‘truetype’), url(‘#{$file-name}.svg’) format(‘svg’);

… so I took out the .woff parts, recompiled… but the generated styles.css still has the same references (as above). Any idea why? How? Why is the sass compiler still putting in that .woff reference???

And I suddenly had a thought - all this testing is in Firefox. I just tried Chrome and it worked ok! With only the .svg in the rebuilt theme jar. Arrggg.
So is it the vaadin server end doing browser detection and telling the browser whether to use .woff or .svg, or is it the browser telling the server what it prefers??
(Maybe these days it is more ‘correct’ to use .woff than .svg??)

Any feedback welcome!!!

Woff font should be accepted by most modern browsers, it is probably just no found and thus the browsers tries other versions.

It looks like the font awesome related font declarattion is still somehow drawn in from the core vaadin theme somehow. Can’t say why without further inspection. I could try creating a setup that inherits from dawn instead fo the default vaadin-themes jar.

cheers,
matti

I noticed the same font-face entries that Philip sees, and thought I wasn’t using the compile theme tool entry correctly. I am struggling with custom fonts, and was looking for font-face entries for my custom fonts when I saw this.