Font Awesome icons not getting loaded with http-proxy-middleware

[anshul-kapoor]

We are using http-proxy-middleware as a reverse proxy. However for the proxied application everything else seem to be working fine but Font Awesome icons of the proxied application are not getting loaded. Any help/suggestions would be appreciated.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide more details about this issue or a reproducible test case?

[anshul-kapoor]

Hi,

Yes, So I have created a proxy using http-proxy-middleware. Now the application which is getting proxied is not loading the font awesome icons. Screen attached below for reference of menu where the icons are not getting loaded.

This is how I am reverse proxying the main applications.

app.use('/', createProxyMiddleware({ target: 'http://127.0.0.1:8080', changeOrigin: true, selfHandleResponse: true, // res.end() will be called internally by responseInterceptor() onProxyRes: responseInterceptor(async (responseBuffer, proxyRes, req, res) => {

Any help on above will be appreciated.

[tagliala]

Any chance to have a reproducible test case?

There are a lot of different approaches to use Font Awesome. If your application is self-hosting icons, in example, we must be sure that CORS and mime-types are properly set and the browser is able to download and identify the font

We have a couple of troubleshooting guides:

• https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/troubleshooting
• https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

Anyway, please fill out our bug report template and provide as many details as you can. In this case a reproducible test case hosted somewhere would work better

[anshul-kapoor]

Hi, I have hosted the test case at this link please here. The icons in the top menu are the ones which are not getting loaded. Application is running on Php Laravel. The icons get loaded properly when the reverse proxy is not there but with reverse proxy the icons do not load. Thanks again for the help.

[tagliala]

Thanks for the reproducible test case

As mentioned before, when self-hosting icons it is important to make sure that the web server serves them with the proper mime type and proper encoding.

Please check the warnings in your browser's development console

Please fix the issues reported in the console. You may need a different mime type or some other actions depending on your specific use case