font-awesome icons shown as squares

[yavuzselimcakir]

Normally everything works fine. But after a while, font-awesome icons do not show anymore and is shown as squares. When I restart tomcat and clear browser cache with CTRL + F5, everything works again as normal. Of course, the problem reoccurs later.

Although not sure I think, anyhow the

Code: Select all

#{resource['primefaces:fa/fontawesome-webfont.eot']}

part in css files are not decoded properly sometimes.

I mean the following css codes:

Code: Select all

@font-face {
    font-family: 'FontAwesome';
    src: url("#{resource['primefaces:fa/fontawesome-webfont.eot']}?v=4.7.0");
    src: url("#{resource['primefaces:fa/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.woff2']}?v=4.7.0") format('woff2'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.woff']}?v=4.7.0") format('woff'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.ttf']}?v=4.7.0") format('truetype'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.svg']}?v=4.7.0#fontawesomeregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

What might be the reason?

[Melloware]

Hmm I have been using FontAwesome with PF for years now and never had any issue with the loading of FontAwesome or the browser cache getting corrupted? Maybe someone else here has but I have never experienced that.

[yavuzselimcakir]

We did not have such a problem either. Meanwhile we have changed our layout to omega which was spark before. May it have anything to do with?

[Melloware]

Ahhh that is possible that Omega is the problem somehow if that is the only thing you have changed recently.

[yavuzselimcakir]

When this problem occurs, I see "OTS parsing error: invalid version tag" error message in the browser console screen. Does anybody have any idea?

[yavuzselimcakir]

As I mentioned before, I face this problem after a while. When tomcat is restarted, problem disappears.

The font-awesome.css source is seen as below when there is problem:

Code: Select all

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
 @font-face {
    font-family: 'FontAwesome';
    src: url("#{resource['primefaces:fa/fontawesome-webfont.eot']}?v=4.7.0");
    src: url("#{resource['primefaces:fa/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.woff2']}?v=4.7.0") format('woff2'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.woff']}?v=4.7.0") format('woff'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.ttf']}?v=4.7.0") format('truetype'), 
      url("#{resource['primefaces:fa/fontawesome-webfont.svg']}?v=4.7.0#fontawesomeregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

The following is source code of font-awesome.css when there is no problem. These codes are from the same application:

Code: Select all

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
 @font-face {
    font-family: 'FontAwesome';
    src: url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.eot.faces?ln=primefaces&v=6.1.4?v=4.7.0");
    src: url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.eot.faces?ln=primefaces&v=6.1.4&#iefix&v=4.7.0") format('embedded-opentype'), 
      url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.woff2.faces?ln=primefaces&v=6.1.4?v=4.7.0") format('woff2'), 
      url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.woff.faces?ln=primefaces&v=6.1.4?v=4.7.0") format('woff'), 
      url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.ttf.faces?ln=primefaces&v=6.1.4?v=4.7.0") format('truetype'), 
      url("/smartClick/javax.faces.resource/fa/fontawesome-webfont.svg.faces?ln=primefaces&v=6.1.4?v=4.7.0#fontawesomeregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

[Melloware]

That is strange. It means Tomcat has stopped processing the resources through the JSF resource resolver. That at least explains why you icons are not showing up but doesn't explain why Tomcat all the sudden stops processing JSF resources.

[emre]

I am observing the same problem with Glassfish 4.1.2, PF 5.1 and ultima layout....

[yavuzselimcakir]

I think I have found the problem.

If there are two identical css files anyhow in the application class path, jsf resource resolver resolves only one of them, since jsf resource resolver processes a file only once. If there two identical files it thinks that it has already resolved it. As a result, if the client browser found the unresolved one the problem occured.

In my case, I had two primefaces.jar files in my webinf/lib folder, one of them being in a sub folder such as webinf/lib/primefaces. Actually I added only the one under sub folder. Possibly netbeans puts a copy of jar files in sub folders directly into lib folder during build process...