Displaying icons next menu items problem

[Ahmed Elshorbagy]

Hello,

I addes <ons-icon> next to each icon item to display icons, it works fine in my desktop chrome

But when I create APK, it looks like this in my mobile

I tried to solve this problem by using crosswalk plugin but I still have the same problem

[munsterlander]

@Ahmed-Elshorbagy I would assume you didn’t include the icons in your app. Make sure that they are included.

[Ahmed Elshorbagy]

Where should I include them??

[munsterlander]

@Ahmed-Elshorbagy Are you using the ones that Onsen includes by default? If so, they should be located in /www/lib/onsenui/css.

[Ahmed Elshorbagy]

I’m using font awesome icons, I used icons in other pages in my app and it get displayed correctly. I opened the path you gave to me and I found only CSS files and font files

[Ahmed Elshorbagy]

I’m still waiting for an answer

[munsterlander]

@Ahmed-Elshorbagy I’m sorry, I am not an employee of Onsen and my suggestions are free. If you want paid support, you can obtain that here. Anyway, now that I am off work, I guess I can try to help you - again.

In that folder, there should be 3 folders: font_awesome, ionicons, and material-design-iconic-font. In those folders, are 2 other folders: css and fonts. The fonts folder should have some image files. If those are all there then we need to look at something else. When you load this application, what error is being shown in the console? Also, can you please post the code that you are using for this list?

[Ahmed Elshorbagy]

@munsterlander I’m sorry, I just wanted to push the post up for an answer. Thank you for your help, I really appreciate it.

[munsterlander]

@Ahmed-Elshorbagy Thank you. Let me know if you are getting an error and then post some of your code. Also, what platform are you testing on?

[Ahmed Elshorbagy]

I have the folder and the files but icons are not displayed.I’m testing on Android .

<ons-template id="split.html">
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('index.html')" tappable >
            <img src="images/logo.png" />
          </ons-list-item>
          <ons-list-item onclick="fn.load('index.html')" tappable>
            <ons-icon icon="fa-tv, material:md-edit" style="color:#CC3300;margin-right:10px"></ons-icon> TV
          </ons-list-item>
          <ons-list-item onclick="fn.load('index_2.html')" tappable>
              <ons-icon icon="md-movie, material:md-edit" style="color:#CC3300;margin-right:10px"></ons-icon>Movies
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
              <ons-icon icon="md-star, material:md-edit" style="color:#CC3300;margin-right:10px"></ons-icon>About
          </ons-list-item>            
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-template>
  

[Ahmed Elshorbagy]

I solved it by removing this attribute
, material:md-edit

[munsterlander]

@Ahmed-Elshorbagy Glad you got it. This all makes sense now and it is working exactly as it is supposed too. Since you are testing on Android, it will always show the material icon which you have the same with md-edit. You can make them different or just remove it all together.