asked on November 6, 2024
I am experiencing an issue with loading Flexmonster icons in my application when deployed to other application. The issue does not occur in my local development environment.
When I include flexmonster.min.css in the bundle and reference the icons (using the @font-face rule in my CSS), everything works fine locally, and the icons load without any issues. However, when I use the application as bundle to other app, I get a "path not found" error for the icon font files (.woff, .ttf) referenced in the CSS.
⋅ November 8, 2024
Hello,
Thank you for contacting us.
There are no specific configuration steps needed for serving assets except making sure that flexmonster.min.css, flexmonster-icons.ttf and flexmonster-icons.woff files are included in the bundle.
You are welcome to contact us if other questions arise.
Kind regards,
Nadia
⋅ November 27, 2024
Hi, still facing same issue, attached screenshot for reference.
Bundle.js is my component which contains assets folder as well.
I am using this other application, which shows following error.
Please help.
⋅ November 28, 2024
Hello,
Thank you for the response.
We noticed that you are using the older version of Flexmonster (v.2.8.19). Therefore, we recommend updating Flexmonster to the latest version. Please check the following guide for reference: Updating to the latest version. Also, it is important to check the migration guide: Migration guide from 2.8 to 2.9.
If updating to the latest version does not resolve the issue, could you please share the relevant bundler configuration files with us? It would greatly help us.
Looking forward to hearing from you.
Kind regards,
Nadia
⋅ January 3, 2025
Hi Nadia, I am still facing same issue, Icons are not being loaded.
I have added folder structure, error and other files for reference.
Tried solution:
In widget component, main.ts added this code: to embed the url
const adjustFMFonts = () => {
console.log("env", environment);
const basePath = `${environment.DOMAIN}/widgets`;
const fontFace = `
@font-face {
font-family: flexmonster-icons;
src: url(${basePath}/flexmonster-icons.woff) format("woff"),
url(${basePath}/flexmonster-icons.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
`;
const style = document.createElement('style');
style.innerHTML = fontFace;
document.head.appendChild(style);
};
window.addEventListener('DOMContentLoaded', () => adjustFMFonts());
on Checking bundle.js, seems like not embedded proper, check below code. Please help
(window.global=window);const adjustFMFonts=()=>{const O=`${environment$1.DOMAIN}/widgets`,w=`
@font-face {
font-family: flexmonster-icons;
src: url(${O}/flexmonster-icons.woff) format("woff"),
url(${O}/flexmonster-icons.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
`,D=document.createElement("style");D.innerHTML=w,document.head.appendChild(D)}
⋅ 7 days ago
Hello Sen,
Thank you for providing us with the details.
We would like to draw your attention to the error message in the browser's console (error1.PNG file). It says that the files assets/flexmonster-icons-cC3Belnk.ttf and assets/flexmonster-icons-CC6B5XFW.woff are not found. We suppose that the issue can be caused by the fact that the webpack does not include fonts in the assets folder. Please check if the webpack.config.js includes the following rules for .ttf and .woff files:
const path = require('path');
module.exports = {
// other properties
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
type: "asset/inline"
}
]
}
};
Then, you can check the assets directory to see if the flexmonster-icons-cC3Belnk.ttf and flexmonster-icons-CC6B5XFW.woff files are added.
Please let us know if this solution helps. Looking forward to hearing from you.
Kind regards,
Nadia