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
-
Hi,
I’m using onsen UI for aMeteor
project with aReact
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
fileimport '../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
-
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.