Hi all, I had a questions related extending the icon library in Apliqo.
We have a few icon libraries in Apliqo (e.g., FA 4.7, FA 5.X, Patternfly) which we can reference throughout the webapp (e.g., navbar, buttons). If we want to use a newer version of FA (or the pro version), what are the steps we can follow to incorporate an additional icon library?
Is is just a matter of adding the proper references in “apliqo\css\apliqo.css”? Thanks!
Hi Wei,
I believe if you change to font awesome 6 then you will no longer be able to use the icons from FA 4 and FA 5. You would then have to use shims to be able to use the earlier versions, however this will change the look and feel of Apliqo UX as the shims will merely use the equivalent icons in FA6 which is different to the earlier versions.
@srichardson , thanks for the info on FA 6! If we just wanted to supplementing the Apliqo icon library (e.g., add flaticon library), would it just be adding the references in “apliqo\css\apliqo.css”?
If you want to add your own custom css then this would best be done be editing the apq-c3-custom/custom-style.css
This way when you upgrade Apliqo UX in the future your changes will not be lost.
An alternative to this is to edit the apq-c3-custom/css/scss/_custom-style.scss SASS file, however this would require you to run the gulp task to compile them into the apliqo.css file.
Should FA v5 icons be referenceable out-of-the-box or do you have to do something to be able to use them first? I thought UX only supported v4 for now?
I tried from v5 both:
and it didn’t render the icon.
@tomb FA 5 works but you need to use “fas” to reference them (i.e., fas fa-umbrella-beach). I believe the “s” is referencing the “solid” icon subset in FA 5 which is incorporate in UX
ah thanks yes that works, I’d been looking at the v6.2 page which has a different reference:
I tried that naming convention and the v4 one (“fa” prefix) and it didn’t work, but “fas” works.
Update: from some initial testing it looks as though the solid versions of the icons (“fas” prefix) work, “far”, “fal”, and “fad” (regular, light & duotone versions of the v5 icons) don’t seem to, but maybe something else needs enabling to get those to work.