Our state of the art Gantt chart


Post by johanbrodin »

Hi,

FontAwsome icons are working fine with the exceptions of brand icons. Please see below jira example and a toolbar button

https://fontawesome.com/v5/icons/jira?s=solid&f=brands

   //working fine 
    <bryntum-button
        text = 'Add Task'
        cls = 'b-raised b-blue'
        icon   = 'b-fa b-fa-plus'
        color  = 'b-green'
        (onAction) = "onCreate($event)"
</bryntum-button>
    
   //not working - or any combination we have tried to get the salesforce icon to show
   <bryntum-button
        text = 'Add Task'
        cls = 'b-raised b-blue'
        icon   = 'b-fab b-fa-jira'
        color  = 'b-green'
        (onAction) = "onCreate($event)"
    ></bryntum-button>

/Johan


Post by alex.l »

Hi Johan,
we use Font Awesome 6 Free
You need to import brands.scss for FontAwesome with these icons.
https://fontawesome.com/v6/docs/web/setup/host-yourself/webfonts

Icon class will be look like this 'fab b-fa-jira'
I will post scss code from brands.scss for you.

/*!
 * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
@import 'functions';
@import 'variables';

:root, :host {
  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
}

.fab,
.#{$fa-css-prefix}-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

@each $name, $icon in $fa-brand-icons {
  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
}

All the best,
Alex


Post by johanbrodin »

Hi Alex,

Why do you not include the brans icons in your distribution? They are part of the free download so my simple input is that they should be included. Another reason for you to to include it is that you are manipulating the include reference b-fa so you are touching the library.

We use css and not scss and your example will not translate into css. So we did include it the normal way according to there homepage but the icons are not shown correctly (they are tilted)

1. Downloading "fontawesome-free-6.1.1-web" and putting it in the asset folder

2. Include the css in the index.html <head> 
<link href="../assets/fontawesome-free-6.1.1-web/css/brands.css" rel="stylesheet">

3. In the angular inline-data example add it to the toolbar in app.component.html
    <bryntum-button
        icon   = 'fa-brands fa-facebook'
        tooltip    = 'Edit selected task'
        (onAction) = "onEditTaskClick()"
    ></bryntum-button>
    
-- The icon should look like below but instead it shows up as per the attachement https://fontawesome.com/icons/facebook?s=&f=brands
Attachments
facebook-icon.png
facebook-icon.png (50.79 KiB) Viewed 203 times

Post by johanbrodin »

Hi again,

The brand fants was showing in italic... So setting the font-style to normal did the trick. If you do do not want to include it in your normal distribution you might want to add a page on it in your documentation since it was not fully straight forward.

A last question on icons. We are using it adding icons to tasks with the iconCls. Is is also possible to include url icons png, svg etc... This would both be a more flexible solution as well as remove size from the boundle.

Regards
Johan


Post by mats »

Why do you not include the brans icons in your distribution?

That would just cause bloat for everyone not using it, so we'd consider this an "application" problem

A last question on icons. We are using it adding icons to tasks with the iconCls. Is is also possible to include url icons png, svg etc... This would both be a more flexible solution as well as remove size from the boundle.

Not supported, but seems like a reasonable request, ticket opened:
https://github.com/bryntum/support/issues/6074


Post by johanbrodin »

Looking forward to that one. Please close this one.


Post Reply