Update Font Awesome version

[PhiHDN]

I would like to ask for the guide, how to update new version of Font Awesome?
Can I get it done by myself?
Or I have to wait for next version of the theme.

Thank you.

[jwenting]

not sure if this will work, but you can try replacing modena-layout/fonts/fontawesome* and modena/layout/css/fontawesome.css with new versions.

[daytona]

I would like to ask for the guide, how to update new version of Font Awesome?
Can I get it done by myself?
Or I have to wait for next version of the theme.

Thank you.

Hi,

We will update with new version of FA ver. 4.4.0. at next release all of our themes.
But if you want to do now , you can do as follows;

1- Download FA Pack from https://fortawesome.github.io/Font-Awesome/
2 - Open archive file and change font files and css files with in use files in Modena,
3 - And change paths of fonts in FA css file properly.

[mert.sincan]

Hi,

We will update with new version of FA ver. 4.4.0. at next release all of our themes.
But if you want to do now , you can do as follows;

1- Download FA Pack from https://fortawesome.github.io/Font-Awesome/
2 - Open archive file and change font files and css files with in use files in Modena,
3 - And change paths of fonts in FA css file properly.

+1. Thank you, Daytona

[PhiHDN]

Hi,

We will update with new version of FA ver. 4.4.0. at next release all of our themes.
But if you want to do now , you can do as follows;

1- Download FA Pack from https://fortawesome.github.io/Font-Awesome/
2 - Open archive file and change font files and css files with in use files in Modena,
3 - And change paths of fonts in FA css file properly.

Thank you for your help

[mert.sincan]

Issue is resolved.

[PhiHDN]

Just a note that:
I have followed the guide and updated FA to version 4.4. However, if I use FA in pf component, FA is not applied any more.
For example:

Code: Select all

<p:commandButton id="searchBtn" process="@form:@child(1):searchName,@this" update="@form" value="Search" icon="fa fa-search" actionListener="#{bean.search}" />

I tried inserting below context-param into web.xml:

Code: Select all

<context-param>
	<param-name>primefaces.FONT_AWESOME</param-name>
	<param-value>true</param-value>
</context-param>

Then it works.



Is there any abnormal thing?

[mert.sincan]

Yes, If you are using Modena Layout + Theme, you don't need to use <context-param> for Font Awesome in web.xml.
Please try;
- download FA4.4.0 (https://fortawesome.github.io/Font-Awesome/)
- remove fontawesome-* in modena-layout/fonts
- add fonts of FA4.4.0 into modena-layout/fonts
- change font-awesome.css

Code: Select all

/*!
 *  Font Awesome 4.4.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['modena-layout:fonts/fontawesome-webfont.eot']}&v=4.4.0");
  src: url("#{resource['modena-layout:fonts/fontawesome-webfont.eot']}&v=4.4.0#iefix") format('embedded-opentype'), 
  url("#{resource['modena-layout:fonts/fontawesome-webfont.woff2']}&v=4.4.0") format('woff2'), 
  url("#{resource['modena-layout:fonts/fontawesome-webfont.woff']}&v=4.4.0") format('woff'), 
  url("#{resource['modena-layout:fonts/fontawesome-webfont.ttf']}&v=4.4.0") format('truetype'), 
  url("#{resource['modena-layout:fonts/fontawesome-webfont.svg']}&v=4.4.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

/*
.fa {
...

add CSS of FA4.4.0

*/

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa, 
.ui-icon.fa {
    background-image: none;
    text-indent: 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    text-indent: 0px;
}

[PhiHDN]

Yes, I am using Modena Layout and Theme.
I did exactly what you listed out but I faced above issue.
I don't know the reason and it's resolved by using context-param. I thought there could be some configs in Modena theme and what I have changed is not enough, so the context-param for FA is necessary.

That's reason why I posted it for confirmation.

As your reply, it should be worked without context-param.
It must be great if we can find out the root cause.
However, it's resolved simply so you can guest the cause quickly it does not take you much time. Otherwise we can ignore it.

[mert.sincan]

PrimeFaces versions(5.2+) and Layouts have fonts and Css of Font Awesome.
Exp;
PrimeFaces 5.3 ->
CSS; https://github.com/primefaces/primeface ... wesome.css (FA 4.3.0)
Fonts; https://github.com/primefaces/primeface ... mefaces/fa (FA 4.3.0)

You can use this css and fonts with <context-param>. We suggest to use FA of Layouts. Therefore, you don't need to add <context-param>.

But, If you have only Premium Theme and want to use FA, please add <context-param>. Because, Only Theme.jar don't have FA folders. You can add with PrimeFaces versions. (using <context-param>)


Also,
If you want to change version of font-awesome in Layouts, you need to add this code;

Code: Select all

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa, 
.ui-icon.fa {
    background-image: none;
    text-indent: 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    text-indent: 0px;
}

You can see this codes in PF versions (Exp; 5.3);

Code: Select all

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa, 
.ui-icon.fa {
    background: none repeat scroll 0 0 transparent !important;
    text-indent: 0px !important;
}