FontAwesome 5 and Babylon

Forum rules
Please note that response time for technical support is within 3-5 business days.
Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

02 Jan 2019, 20:41

I have included FontAwesome 5.6.1 using WebJars.

Code: Select all

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>font-awesome</artifactId>
            <version>5.6.1</version>
        </dependency>
Turned PrimeFaces.FONT_AWESOME to false.

Added this to my XHTML:

Code: Select all

<h:outputStylesheet library="webjars" name="font-awesome/5.6.1/css/fontawesome.min-jsf.css" />
However the core icons of babylon are not working I assume because they are hard coded to FontAwesome 4.7? How can we make Babylon compatible with FontAwesome 5?

Code: Select all

/* Add your variable customizations of theme here */
/*.ui-icon-carat-1-n { @include icon-override("\f106"); }
.ui-icon-carat-1-e { @include icon-override("\f105"); }
.ui-icon-carat-1-s { @include icon-override("\f107"); }
.ui-icon-carat-1-w { @include icon-override("\f104"); }
.ui-icon-carat-2-n-s { @include icon-override("\f0dc"); }
.ui-icon-triangle-1-n { @include icon-override("\f0de"); }
.ui-icon-triangle-1-e { @include icon-override("\f0da"); }
.ui-icon-triangle-1-s { @include icon-override("\f0dd"); }
.ui-icon-triangle-1-w { @include icon-override("\f0d9"); }
.ui-icon-triangle-2-n-s { @include icon-override("\f0dc"); }
.ui-icon-arrow-1-n { @include icon-override("\f062"); }
.ui-icon-arrow-1-e { @include icon-override("\f061"); }
.ui-icon-arrow-1-s { @include icon-override("\f063"); }
.ui-icon-arrow-1-w { @include icon-override("\f177"); }
.ui-icon-arrow-2-n-s { @include icon-override("\f07d"); }
.ui-icon-arrow-2-e-w { @include icon-override("\f07e"); }
.ui-icon-arrowthick-1-n { @include icon-override("\f176"); }
.ui-icon-arrowthick-1-e { @include icon-override("\f178"); }
.ui-icon-arrowthick-1-s { @include icon-override("\f175"); }
.ui-icon-arrowthick-1-w { @include icon-override("\f177"); }
.ui-icon-arrowreturnthick-1-n { @include icon-override("\f112"); transform: rotate(90deg)}
.ui-icon-arrow-4 { @include icon-override("\f047"); }
.ui-icon-arrow-4-diag { @include icon-override("\f0b2"); }
.ui-icon-extlink { @include icon-override("\f08e"); }
.ui-icon-newwin { @include icon-override("\f24d"); }
.ui-icon-refresh { @include icon-override("\f021"); }
.ui-icon-shuffle { @include icon-override("\f074"); }
.ui-icon-transfer-e-w { @include icon-override("\f18d"); }
.ui-icon-folder-collapsed { @include icon-override("\f07b"); }
.ui-icon-folder-open { @include icon-override("\f115"); }
.ui-icon-document { @include icon-override("\f016"); }
.ui-icon-note { @include icon-override("\f24a"); }
.ui-icon-mail-open { @include icon-override("\f003"); }
.ui-icon-suitcase { @include icon-override("\f0f2"); }
.ui-icon-comment { @include icon-override("\f0e5"); }
.ui-icon-person { @include icon-override("\f007"); }
.ui-icon-print { @include icon-override("\f02f"); }
.ui-icon-trash { @include icon-override("\f1f8"); }
.ui-icon-locked { @include icon-override("\f023"); }
.ui-icon-unlocked { @include icon-override("\f09c"); }
.ui-icon-bookmark { @include icon-override("\f02e"); }
.ui-icon-tag { @include icon-override("\f02b"); }
.ui-icon-home { @include icon-override("\f015"); }
.ui-icon-flag { @include icon-override("\f024"); }
.ui-icon-calendar { @include icon-override("\f073"); }
.ui-icon-cart { @include icon-override("\f07a"); }
.ui-icon-pencil { @include icon-override("\f040"); }
.ui-icon-clock { @include icon-override("\f017"); }
.ui-icon-disk { @include icon-override("\f0c7"); }
.ui-icon-calculator { @include icon-override("\f1ec"); }
.ui-icon-zoomin { @include icon-override("\f00e"); }
.ui-icon-zoomout { @include icon-override("\f010");}
.ui-icon-search { @include icon-override("\f002");}
.ui-icon-wrench { @include icon-override("\f0ad");}
.ui-icon-gear { @include icon-override("\f013");}
.ui-icon-heart { @include icon-override("\f004");}
.ui-icon-star { @include icon-override("\f005");}
.ui-icon-link { @include icon-override("\f0c1");}
.ui-icon-cancel { @include icon-override("\f05e");}
.ui-icon-plus { @include icon-override("\f067");}
.ui-icon-plusthick { @include icon-override("\f067"); }
.ui-icon-minus { @include icon-override("\f068");}
.ui-icon-minusthick { @include icon-override("\f068"); }
.ui-icon-close { @include icon-override("\f00d");}
.ui-icon-closethick { @include icon-override("\f00d"); }
.ui-icon-key { @include icon-override("\f084");}
.ui-icon-lightbulb { @include icon-override("\f0eb");}
.ui-icon-scissors { @include icon-override("\f0c4");}
.ui-icon-clipboard { @include icon-override("\f0ea");}
.ui-icon-copy { @include icon-override("\f0c5");}
.ui-icon-contact { @include icon-override("\f0c0");}
.ui-icon-image { @include icon-override("\f1c5");}
.ui-icon-video { @include icon-override("\f1c8");}
.ui-icon-music { @include icon-override("\f001");}
.ui-icon-alert { @include icon-override("\f071");}
.ui-icon-info { @include icon-override("\f05a");}
.ui-icon-notice { @include icon-override("\f12a");}
.ui-icon-help { @include icon-override("\f059");}
.ui-icon-check { @include icon-override("\f00c");}
.ui-icon-bullet { @include icon-override("\f111");}
.ui-icon-radio-off { @include icon-override("\f10c");}
.ui-icon-radio-on { @include icon-override("\f111");}
.ui-icon-pin-s { @include icon-override("\f08d");}
.ui-icon-play { @include icon-override("\f04b");}
.ui-icon-pause { @include icon-override("\f04c");}
.ui-icon-seek-next { @include icon-override("\f051");}
.ui-icon-seek-prev { @include icon-override("\f048");}
.ui-icon-seek-end { @include icon-override("\f051");}
.ui-icon-seek-first { @include icon-override("\f048");}
.ui-icon-stop { @include icon-override("\f04d");}
.ui-icon-eject { @include icon-override("\f052");}
.ui-icon-volume-off { @include icon-override("\f026");}
.ui-icon-volume-on { @include icon-override("\f028");}
.ui-icon-power { @include icon-override("\f011");}
.ui-icon-signal { @include icon-override("\f012");}
.ui-icon-battery-0 { @include icon-override("\f244");}
.ui-icon-battery-1 { @include icon-override("\f243");}
.ui-icon-battery-2 { @include icon-override("\f242");}
.ui-icon-battery-3 { @include icon-override("\f240");}
.ui-icon-circle-plus { @include icon-override("\f055");}
.ui-icon-circle-minus { @include icon-override("\f056");}
.ui-icon-circle-close { @include icon-override("\f057");}
.ui-icon-circle-triangle-e { @include icon-override("\f138"); }
.ui-icon-circle-triangle-s {  @include icon-override("\f13a"); }
.ui-icon-circle-triangle-w { @include icon-override("\f137"); }
.ui-icon-circle-triangle-n { @include icon-override("\f139"); }*/
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

08 Jan 2019, 12:38

Hi Melloware,

Firstly, Babylon doesn't use _icons.scss file. The icon classes in it have comment symbols (/* */). To use FA 5, you need to change the values in icon-override method. You can search @include icon-override, then change it with new icon code of FA 5. I think _data.scss and _forms.scss will be enough to review.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

08 Jan 2019, 14:29

Thanks I will give it a shot and let you know how it goes.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

09 Jan 2019, 10:02

Ok, Thanks a lot!

phonetix
Posts: 8
Joined: 27 Apr 2017, 17:27

04 Mar 2019, 12:08

I do not understand all the steps ...

I have changed in the web.xml:
<context-param>
<param-name> primefaces.FONT_AWESOME </ param-name>
<param-value> false </ param-value>
</ context-param>
I downloaded the last jar of the font-awesome font awesome and installed it in my template.
I do not understand the next step to be able to use the icons of the new library.
Can you help me?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 Mar 2019, 14:56

Please see my comment;
To use FA 5, you need to change the values in icon-override method. You can search @include icon-override, then change it with new icon code of FA 5. I think _data.scss and _forms.scss will be enough to review.
Exp;

Code: Select all

// _data.scss ->  line 36
.ui-paginator-first {
            @include icon-override("\f048"); /* Please change this FA 4 icon's code with FA 5 code(https://fontawesome.com/icons?d=gallery&m=free) */
            line-height: $paginatorElementHeight;
            
            &:before {
                position: relative;
            }
        }

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 May 2019, 17:21

As a follow up I found a much easier way! Using FontAwesome 5 Shim CSS for FA 4.

Turn default PF support OFF in web.xml:

Code: Select all

<context-param>
     <param-name>primefaces.FONT_AWESOME</param-name>
     <param-value>false</param-value>         
</context-param>
Update your pom.xml.

Code: Select all

<dependency>
     <groupId>org.webjars</groupId>
     <artifactId>font-awesome</artifactId>
     <version>5.8.2</version>
</dependency>
Use the proper WebJars CSS for JSF including the v4-shims.css which makes it seamless to use in Babylon or any PF premium Theme..

Code: Select all

<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/all.min-jsf.css" />
<h:outputStylesheet library="webjars" name="font-awesome/5.8.2/css/v4-shims.min-jsf.css" />
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

haase
Posts: 4
Joined: 20 Feb 2018, 19:45

13 Sep 2019, 20:25

Melloware wrote:
18 May 2019, 17:21
As a follow up I found a much easier way! Using FontAwesome 5 Shim CSS for FA 4.
Did this for the new version and although the FA5 icons are working, all of the icons with .ui-icon class still doesn't show up.

Do I still need to override them manually?

Code: Select all

    	<h:outputStylesheet library="webjars" name="font-awesome/5.10.1/css/all.min-jsf.css" />
		<h:outputStylesheet library="webjars" name="font-awesome/5.10.1/css/v4-shims.min-jsf.css" />

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 Sep 2019, 13:23

I think you might have to tweak it.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

erickdeoliveiraleal
Posts: 79
Joined: 25 Mar 2013, 13:00

08 Apr 2020, 20:33

there's a free fork of fontawesome too: https://github.com/ForkAwesome/Fork-Awesome

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests