Icons not showing up in react template

chidimo

Hi,
I’m using onsen UI for a Meteor project with a React frontend. So far everything is working fine. But when I try to display icons as illustrated here https://onsen.io/playground/?framework=react&category=reference&module=icon, the icons don’t show up.

I have the following imports in my client/main.jsx file

import '../node_modules/onsenui/css/onsenui.css';
import '../node_modules/onsenui/css/onsen-css-components.css';
import '../node_modules/onsenui/js/onsenui.js';

I also get the following warnings in my dev console

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/ionicons/css/ionicons.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/material-design-iconic-font/css/material-design-iconic-font.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/font_awesome/css/font-awesome.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/font_awesome/css/v4-shims.min.css".

I know this is a result of the following imports in the onsenui/css/onsenui.css file.

@import url("./ionicons/css/ionicons.min.css");
@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("./font_awesome/css/font-awesome.min.css");
@import url("./font_awesome/css/v4-shims.min.css");

I need help on how to fix this so I can display icons.
Thanks

chidimo

I found the answer to my question. It’s right here

https://medium.com/the-web-tub/getting-started-with-meteor-and-onsen-ui-725eab52c69

Under Troubleshooting heading.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Icons not showing up in react template