Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

FontAwesome Icons not displaying

Allen Pham
6 years ago May 16, 2015 3:39am

Hi,

I hope this will be a simple question with a simple answer.  I am using the Vaadin designer to create a simple form with fields labels, and buttons.  When in desing mode, I am able to assign icons to buttons and labels and the icons display correctly.  However, when I publish the app, the icons does not show up.  Further, I get a "fonticon:\FontAwesome\f044 (The filename, directory name, or volume label syntax is incorrect)".  Please point me in the right direction.

Thanks in advance.

Felix Kalka
6 years ago May 17, 2015 11:12pm

The generated code from the designer would help.

Allen Pham
6 years ago May 18, 2015 7:22pm

Hi Felix,

Here's the generated code from the desinger below.  Thanks.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" name="design-properties" content="{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:false,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;PAPER_WIDTH&quot;:556,&quot;PAPER_HEIGHT&quot;:509,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src&quot;,&quot;THEME&quot;:&quot;aaptimize&quot;}">
 </head> 
 <body> 
  <v-vertical-layout size-full="true"> 
   <v-horizontal-layout margin="true" _id="_buttonPanel" :expand="2"> 
    <v-button icon="fonticon://FontAwesome/f15b" plain-text="" _id="_newContactButton">
      New Contact 
    </v-button> 
   </v-horizontal-layout> 
   <v-horizontal-layout size-full="true" _id="_contentPanel" :expand="8"> 
    <v-panel size-full="true" _id="_contactGrid" :expand="6"></v-panel> 
    <v-form-layout size-full="true" margin-right="true" margin-bottom="false" _id="_contactData" :expand="4"></v-form-layout> 
   </v-horizontal-layout> 
  </v-vertical-layout>  
 </body>
</html>

Felix Kalka
6 years ago May 18, 2015 9:47pm

I thought you are talking about the old designer... Don't you have the possiblity to get some Java code from it?

Allen Pham
6 years ago May 19, 2015 1:27am

Hi Felix,

Here's the auto generated code.  However, the auto generated code only shows the components of the form but not its properties.

package aaptimize.uidesign.account;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.annotations.DesignRoot;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.declarative.Design;

/** 
 * !! DO NOT EDIT THIS FILE !!
 * 
 * This class is generated by Vaadin Designer and will be overwritten.
 * 
 * Please make a subclass with logic and additional interfaces as needed,
 * e.g class LoginView extends LoginDesign implements View { … }
 */
@DesignRoot
@AutoGenerated
@SuppressWarnings("serial")
public class ContactFormDesign extends VerticalLayout {
    protected com.vaadin.ui.HorizontalLayout _buttonPanel;
    protected com.vaadin.ui.Button _newButton;
    protected com.vaadin.ui.Button _editButton;
    protected com.vaadin.ui.Button _deleteButton;
    protected com.vaadin.ui.Panel _contentPanel;

    public ContactFormDesign() {
        Design.read(this);
    }
}
 

Felix Kalka
6 years ago May 19, 2015 8:57am

Ok, since the designer is in alpha state, i guess this is a bug. You should file a bug-report in the tracker!

Allen Pham
6 years ago May 19, 2015 5:52pm

Ok will do.