font icons, liferay portlet

hi

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
        <header-css>/css/style.css</header-css>
    </portlet>
</liferay-portlet-app>

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!)

@SuppressWarnings("serial")
@Theme("valo")
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 :)

?

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

<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">

and then changing to

        <header-header-css>/css/style.css</header-header-css>
    </portlet>
</liferay-portlet-app>

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

afsend.setIcon(VaadinIcons.ENVELOPE);

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.