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.