[REACT] Combining Font Awesome Pro with custom fonts from FA Kit

[lassebisbjerg]

Hi,

Is it possible to combine the use of a Font Awesome pro package, e.g. "light", with custom icons added to a font awesome kit?

I added the Font Awesome Package in SCSS as suggested in the documentation here:
https://bryntum.com/products/schedulerpro/docs/#Grid/guides/customization/iconfontupgrade.md#font-awesome-fonts, which works just fine, but I'm having trouble combining this with some custom fonts added in the Font Awesome kit.

My global.scss:

// global styling
@import "../../public/fa/scss/custom-icons.scss";
@import "../../public/fa/scss/light.scss";

$fa-font-path : "/fa/webfonts/";

// Use "Font Awesome 6 Pro" icons
$icon-font : 'Font Awesome 6 Pro';
// Use "300" to match the Light icons
$icon-font-weight : 300;

@import "@bryntum/schedulerpro/source/resources/sass/themes/stockholm.scss";

body {
    --bryntum-theme-info : {"name":"ProLightStockholm"};
}

I use a custom font like this:

<i class="b-fa b-fa-kit b-fa-light-lock-clock"></i>

But this does not work and I tried a number of different combinations of b-fa b-fa-kit, etc.

[marcio]

Hey Lasse,

Thanks for reaching out.

To combine Font Awesome Pro with custom icons from a Font Awesome kit, ensure that both the Font Awesome Pro and your custom kit are correctly imported and configured in your project. The issue might be related to the class names or the path configuration. Please check the following

1. Check Font Paths: Ensure that $fa-font-path is correctly pointing to the directory where your Font Awesome webfonts are located.

2. Class Names: Verify that the class names used for custom icons are correct. The class b-fa-kit should correspond to the custom icons defined in your kit. If b-fa-light-lock-clock is a custom icon, ensure it is correctly defined in your custom-icons.scss.

3. Import Order: Make sure that the custom icons are imported after the Font Awesome Pro styles to ensure they are not overridden.

If the issue persists, double-check the custom icon definitions in your custom-icons.scss and ensure they match the class names used in your HTML.

If none of them help, could you please provide a minimal runnable test case for us to check here and assist you better on this topic?

[lassebisbjerg]

I almost got it working with both Pro and custom icons.

Pro:

<i className="b-fa b-fa-music"></i> Music

Custom:

<i class='fa-kit fa-light-comment-sms-circle-check b-fa-2x'></i>

I first tried using the "b-" prefix on custom icons, but that does not work.
Including "fa-kit" and omitting the prefix worked.

Now, the strange thing is that some pro-icons seem not to work, e.g. the "fa-house-building" and other icons with more than a single dash in the name.
E.g. "b-fa-clock" works, but "b-fa-clock-two" doesn't.

I tried a lot of different icons and it seems quite consistent.

[khattakdev]

Now, the strange thing is that some pro-icons seem not to work, e.g. the "fa-house-building" and other icons with more than a single dash in the name.
E.g. "b-fa-clock" works, but "b-fa-clock-two" doesn't.

fa-clock is a regular and fa-clock-two is a pro. Try putting $icon-font inside .b-fa:

.b-fa:before,
.b-icon:before {
    font-family : 'Font Awesome 6 Pro';
    /* Regular icons */
    font-weight : 300;
}