Page 1 of 2
[ANGULAR] Replace font awesome free with pro
Posted: Wed Mar 29, 2023 5:38 pm
by bherford
I've followed the docs here to try and upgrade font awesome to the pro version.
https://bryntum.com/products/gantt/docs/guide/Grid/customization/iconfontupgrade
my sass code below generates the results seen in the below screenshots
$fa-font-path: '../../../edge/fontawesome/webfonts';
$icon-font : 'Font Awesome 6 Pro';
$icon-font-weight : 400;
// Bryntum Variables
// Do not edit these files
@import 'styles/resources/core-sass/themes/vars/stockholm-vars';
@import 'styles/resources/grid-sass/themes/vars/stockholm-vars';
@import 'styles/resources/sass/themes/vars/stockholm-vars';
// Bryntum generated sass required for gantt product
// Do not edit these files
@import 'styles/resources/core-sass/all';
@import 'styles/resources/grid-sass/all';
@import 'styles/resources/scheduler-sass/all';
@import 'styles/resources/schedulerpro-sass/all';
@import 'styles/resources/sass/all';
// Edge custom sass
// Base
@import "styles/edge/base/buttons";
@import "styles/edge/base/colors";
@import "styles/edge/base/icons";
@import "styles/edge/base/layout";
@import "styles/edge/base/mixins";
@import "styles/edge/base/variables";
// misc
@import "styles/edge/misc";
@import "styles/edge/bryntum-overrides/forms";
// Components
@import "styles/edge/components/gantt";
@import "styles/edge/components/gantttoolbar";
@import "styles/edge/components/pdfexport";
@import "styles/edge/components/projectselector";
@import "styles/edge/components/search";
@import "styles/edge/components/sidebar";
@import "styles/edge/components/timerangesindicators";
@import "styles/edge/base/typography";
@import "styles/edge/components/filters";
@import "styles/edge/components/utilitytoolbar";
body {
--bryntum-theme-info : {"name":"ProRegularStockholm"};
font-family: $edge-base-font;
font-size: $edge-standard;
color: $edge-black;
}
h1, h2, h3, h4, h5, h6 {
font-family: $edge-base-font;
}
.edge-shift-right {
margin-left: auto;
}
Screenshot 2023-03-29 at 11.36.01 AM.png (9.02 KiB) Viewed 862 times
Screenshot 2023-03-29 at 11.37.30 AM.png (9.01 KiB) Viewed 862 times
it seems like the path is broken?
Re: [ANGULAR] Replace font awesome free with pro
Posted: Wed Mar 29, 2023 8:17 pm
by marcio
Hey bherford,
Could you please check if these posts help you solve the problem?? viewtopic.php?p=120084&hilit=font+awesome#p120084 and viewtopic.php?p=87782#p87782
If not, please let us know to try to assist you with this.
Re: [ANGULAR] Replace font awesome free with pro
Posted: Wed Mar 29, 2023 10:04 pm
by bherford
Hey Marcio, thanks for the links, but I've tried those to no avail.
I'm importing these files in my src/styles.scss to setup a custom theme for Gantt, which then gets compiled to styles.css when angular builds:
// Bryntum Variables
// Do not edit these files
@import 'styles/resources/core-sass/themes/vars/stockholm-vars.scss';
@import 'styles/resources/grid-sass/themes/vars/stockholm-vars.scss';
@import 'styles/resources/sass/themes/vars/stockholm-vars.scss';
// Bryntum generated sass required for gantt product
// Do not edit these files
@import 'styles/resources/core-sass/all.scss';
@import 'styles/resources/grid-sass/all.scss';
@import 'styles/resources/scheduler-sass/all.scss';
@import 'styles/resources/schedulerpro-sass/all.scss';
@import 'styles/resources/sass/all.scss';
my path to the webfont files from my styles.scss is as follows:
$fa-font-path : '/assets/fontawesome/webfonts';
that should point $fa-font-path in my imported files to my font awesome pro files, but it loads broken icons.
I want to be able to use my font awesome pro license, and use b-fa-regular and bfa-solid at once.
Re: [ANGULAR] Replace font awesome free with pro
Posted: Wed Mar 29, 2023 10:47 pm
by bherford
So this is how I've gotten the icons to load again, but they only load the solid icons, not the regular, even though I am loading the 400 font-weight.
$fa-font-path : '../../../../assets/fontawesome/webfonts';
$icon-font-weight : 400;
// Bryntum Variables
// Do not edit these files
@import '../resources/core-sass/themes/vars/stockholm-vars.scss';
@import '../resources/grid-sass/themes/vars/stockholm-vars.scss';
@import '../resources/sass/themes/vars/stockholm-vars.scss';
// Bryntum generated sass required for gantt product
// Do not edit these files
@import '../resources/core-sass/all.scss';
@import '../resources/grid-sass/all.scss';
@import '../resources/scheduler-sass/all.scss';
@import '../resources/schedulerpro-sass/all.scss';
@import '../resources/sass/all.scss';
$icon-font : 'Font Awesome 6 Pro';
// Edge custom sass
// Base
@import "base/buttons";
@import "base/colors";
@import "base/icons";
@import "base/layout";
@import "base/mixins";
@import "base/variables";
// misc
@import "misc";
@import "bryntum-overrides/forms";
// Components
@import "components/gantt";
@import "components/gantttoolbar";
@import "components/pdfexport";
@import "components/projectselector";
@import "components/search";
@import "components/sidebar";
@import "components/timerangesindicators";
@import "base/typography";
@import "components/filters";
@import "components/utilitytoolbar";
body {
--bryntum-theme-info : {"name":"ProRegularStockholm"};
font-family: $edge-base-font;
font-size: $edge-standard;
color: $edge-black;
}
Re: [ANGULAR] Replace font awesome free with pro
Posted: Fri Mar 31, 2023 10:51 am
by alex.l
Hi,
Hard to say, visually the syntax is okay. Any chance to get a runnable test case for debugging?
Or try to check yourself if these styles are loaded, applied.
Re: [ANGULAR] Replace font awesome free with pro
Posted: Fri Mar 31, 2023 9:30 pm
by bherford
Hi Alex, I've zipped a build that is similar to the one we use in production. It's based on the advanced example, to run this project you can do an
, then navigate to
You should see the advanced gantt, and if you open the inspector (chrome) and inspect an icon, you'll see the following result:
Screenshot 2023-03-31 at 2.46.38 PM.png (481.69 KiB) Viewed 756 times
My Pro icons should be winning out over the free ones, and have a font weight of 400. I've set some icon values to
icon: 'b-fa-regular b-fa-plus'
but the solid icon loads instead.
Here is a link for the demo I've created: https://drive.google.com/file/d/1MUGpodbyHnXyVO0SgOof7c8QXvRfS3W3/view?usp=sharing
Re: [ANGULAR] Replace font awesome free with pro
Posted: Mon Apr 03, 2023 10:01 am
by alex.l
Hi, this is that I see when I open your app. I guess some more steps required to get the page?
Btw, there is no environment
import available, so I had to comment all related to that
import { environment } from './../../environments/environment';
Screenshot 2023-04-03 at 10.54.44.png (106.49 KiB) Viewed 745 times
Did you try to repeat steps from the guide from scratch in our demo app?
Re: [ANGULAR] Replace font awesome free with pro
Posted: Mon Apr 03, 2023 2:12 pm
by bherford
Re: [ANGULAR] Replace font awesome free with pro
Posted: Tue Apr 04, 2023 11:41 am
by alex.l
Thanks for updated test case. There is a problem with paths, as I see.
I quickly tried to move style from your /custom theme to app.component.scss
as suggested in guide, replace default font src in styles, and add override for .b-fa
and .b-icon
as per guide, and it works. Here is the code I added to app.component.scss
@import "@bryntum/gantt/gantt.material.css";
@import "@bryntum/demo-resources/scss/example.scss";
// from here
$fa-font-path : '/assets/fontawesome/webfonts';
$icon-font : 'Font Awesome 6 Pro';
$icon-font-weight : 400;
@font-face {
font-family: 'Font Awesome 6 Pro';
font-style: normal;
font-weight: 400;
src: url('/assets/fontawesome/webfonts/fa-regular-400.woff2') format('woff2'),
url('/assets/fontawesome/webfonts/fa-regular-400.ttf') format('truetype');
}
.b-fa:before,
.b-icon:before {
font-family : 'Font Awesome 6 Pro';
/* Regular icons */
font-weight : 400;
}
Re: [ANGULAR] Replace font awesome free with pro
Posted: Tue Apr 04, 2023 2:42 pm
by bherford
Hi Alex, thanks this worked.
But now I have a styles in the app.component.scss, and inside a styles.scss. I'd like to be able to organize those styles together. Can you link the documentation for putting styles in app.component.scss?