0

I am working with primefaces spark-layout-2.1.2 and i need to upgrade font awesome to use new icon. I changed this header but not work yet:

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

}

meyquel
  • 2,134
  • 5
  • 23
  • 42
  • What **does** it do? What errors do you get? Where did you change this? Does it work with another theme? I personally **never** use the PrimeFaces embedded fontAwesome: https://stackoverflow.com/questions/18891768/how-to-use-font-awesome-from-webjars-org-with-jsf#28652968 – Kukeltje Jun 29 '17 at 07:34
  • only for get new icon. – meyquel Jun 29 '17 at 14:40

1 Answers1

0

1) You need to update the files in the primefaces package path:

src/main/resources/META-INF/resources/primefaces/fa/FontAwesome.otf src/main/resources/META-INF/resources/primefaces/fa/fontawesome-webfont.eot src/main/resources/META-INF/resources/primefaces/fa/fontawesome-webfont.svg src/main/resources/META-INF/resources/primefaces/fa/fontawesome-webfont.ttf src/main/resources/META-INF/resources/primefaces/fa/fontawesome-webfont.woff src/main/resources/META-INF/resources/primefaces/fa/fontawesome-webfont.woff2

2) Edit the file src/main/resources/META-INF/resources/primefaces/fa/font-awesome.css and change to:

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');

3) Unfortunely you need to add all new icons manualy in src/main/resources/META-INF/resources/primefaces/fa/font-awesome.css as these two samples bellow:

.fa-handshake-o:before {
    content: "\f2b5";
}
.fa-envelope-open:before {
   content: "\f2b6";
}

For a complete list of icons added in 4.7.0 version take a look at this commit https://github.com/primefaces/primefaces/commit/b40b2fd5a27956d49d247b24c8aac60a8a3301eb

There are some questionaments why this is so difficult to update and maybe in the future it's become more simple https://github.com/primefaces/primefaces/issues/1956

Fabio Luis
  • 11
  • 3
  • PrimeFaces should just not include it in the way they do. It looks simpler for regular users but makes it more difficult for others. And just adding a maven dependency to enable fontawesome should be feasible for others to – Kukeltje Jun 29 '17 at 12:42