font icons, liferay portlet

Flow
1

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
/css/style.css

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 :slight_smile:

?

2

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

and then changing to

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

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)

3

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.