Premium support for our pure JavaScript UI components


Post 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
Screenshot 2023-03-29 at 11.36.01 AM.png (9.02 KiB) Viewed 601 times
Screenshot 2023-03-29 at 11.37.30 AM.png
Screenshot 2023-03-29 at 11.37.30 AM.png (9.01 KiB) Viewed 601 times

it seems like the path is broken?


Post 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.

Best regards,
Márcio


Post 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.


Post 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;
}

Post 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.

All the best,
Alex


Post 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

npm install

, then navigate to

http://localhost:4200/

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
Screenshot 2023-03-31 at 2.46.38 PM.png (481.69 KiB) Viewed 495 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


Post 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
Screenshot 2023-04-03 at 10.54.44.png (106.49 KiB) Viewed 484 times

Did you try to repeat steps from the guide from scratch in our demo app?

All the best,
Alex


Post by bherford »

Hi Alex,

I shared the wrong link with you. Here is the correct one: https://drive.google.com/file/d/126F6NYoboC1Z11A45VuMtz_61AufzkBX/view?usp=sharing

Thanks


Post 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;
  }

All the best,
Alex


Post 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?


Post Reply