FontAwesome 5 and Babylon

Post Reply
User avatar
Melloware
Posts: 817
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 Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 6.2.10 / PF Extensions 6.2.9

User avatar
aragorn
Posts: 3351
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.

User avatar
Melloware
Posts: 817
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 Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 6.2.10 / PF Extensions 6.2.9

User avatar
aragorn
Posts: 3351
Joined: 29 Jun 2013, 12:38

09 Jan 2019, 10:02

Ok, Thanks a lot!

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest