TemplateRenderer not displaying Fontawesome

Flow
1
  1. I am using Vaadin 13.08
  2. I have downloaded Fontawesome files in “webapp/frontend/font-awesome” folder.
  3. I have a file “common.css” in the “webapp/css” folder that has this code for referencing fontawesome downloads
<!-- Remember to import custom-style, which is included in the Polymer package -->
<link rel="import"
      href="../bower_components/polymer/lib/elements/custom-style.html">

<!-- Font Awesome -->
<link href="../font-awesome/css/all.css" rel="stylesheet"> <!--load all styles -->

<custom-style>
  <style>
  	.edu-login{
  	........
  1. I have a class that represents a page with this annotation
@HtmlImport("css/common.css")

and I add to a VerticalLaout component this code that represents an icon from fontawesome

myVerticalLayout.add(new Html(""<span class=\"fas fa-camera\"></span>"));

and works.

  1. Now I want to add a TemplateRenderer of a ComboBox (in this page) with a code like this:
combo.setRenderer(
	TemplateRenderer
		.<Person>of("<span class=\"fas fa-camera\"></span> [[item.name]
]")
		.withProperty("name", Person::getName));

But the icon is not showed.

It seems that the fontawesome downloaded files are not visible to the template renderer.

Any help?

Thanks

2

@HtmlImport(“css/common.css”)

You can’t import css file with @HtmlImport, you should use @StyleSheet instead, see:

https://vaadin.com/docs/v13/flow/importing-dependencies/tutorial-include-css.html

3

Thanks Tatu, for your quick answer!

but I am not good at this framework. I am getting into new trouble when changing from

@HtmlImport("css/common.css")

to

@StyleSheet("css/common.css")

I have the following problems:

  1. I have a login page to whom I have changed the annotation to @StyleSheet and it cannot get the styles properly
  2. But when the user is logged, the second page (the working page) can get the styles perfectly although it has no @HtmlImport or @StyleSheet annotations
  3. The problem with the ComboBox TemplateRenderer has not been solved as it cannot display the fontawesome icons.

So I will resign myself.

I have been googling about this matter and could not find a good solution to the problem.