Monaca Onsen UI Discord Chat Github Repo

Icons not showing up in react template



  • 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



  • 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.