font icons, liferay portlet


im not sure how to get it to work. Im using Eclipse and Vaadin Designer plugin. Created a Vaadin 7 project. Added the Ivy reference.

I added this line

in the liferay-portlet.xml file and tried to create folder/file under the folder “WebContent” created by Eclipse/designer. I see this folder correctly in the webapp folder under tomcat…

Im completly unable to use the teaming thing the Eclipse/Designer plugin creates. If I dont have the theme set to valo as below it looks competly messed up (im compiling the widgetset using eclipse and also deploying/using the Vaadin 7 Control!)

public class SmsreminderUI extends UI {

so… how can I use the icons in a completly down to earh fasion - no fancy theme things, including strange things or something like this? Somthing that just WORKS :slight_smile:


small update - the designer/plugin does not set the correct DOCTYPE … changing it to

and then changing to


means now the browser at least shows that reference as part of the HTML

In that file I placed

@font-face {
font-family: ‘Vaadin-Icons’;
src: url(‘fonts/Vaadin-Icons.eot’);
src: url(‘fonts/Vaadin-Icons.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/Vaadin-Icons.woff’) format(‘woff’),
url(‘fonts/Vaadin-Icons.ttf’) format(‘truetype’),
url(‘fonts/Vaadin-Icons.svg#icomoon’) format(‘svg’);
.Vaadin-Icons {
font-family: ‘Vaadin-Icons’;

and in Java code Im using


but its not the correct icon (looks like some standard “missing icon” thats put on the button (firefox - IE simply shows nothing)

Vaadin is styled pretty much exclusively from the Vaadin theme and not much from the surrounding Liferay theme (including css pulled in via liferay-portlet.xml definition) makes it through.

Whether using the shared environment or standalone, you’re better off creating a custom Vaadin 7 theme and using that as the theme for your Vaadin portlet.

It’s really not all that hard, the Vaadin 7 Control Panel for Liferay can help you create a new theme for Vaadin 7 shared environment that you can then use as your @Theme annotation value.