I googled a lot for menu icons, but I never figured out how to add my own icon for a menu. Finally I found this homepage with info.
It worked partially. First I made a small icon 28 x 28 px. But it was too blurry. I wanted a round icon, so I used Gimp to get that with an image 200 x 200 px and saved as .png (you cant use jpg for a round icon).
Then I made the image sharper with Gimp and Sharpen (Unsharpen mask).
Now I added the image in src/img
In src/css/app.css I added:
i.icon.icon-myicon {
width: 38px; height: 38px;
background-image: url("../img/viskarund2.png");
position: absolute;
}
Note: icon size is 38p x 38px and bigger than normal 28x28px.
In index.html or home.f7.html for a menu item:
<li class="accordion-item">
<a href="#" class="item-link item-content atter">
<div class="item-inner">
<i class="icon icon-myicon"></i>
<div class="item-title tutti">Grandiositet</div>
</div>
</a>
<i class="icon icon-myicon"></i> is to show the icon
css tutti is to move text Grandiositet to the right 45px to displace text over image.
In src/css/app.css I added:
.tutti {
margin-left: 45px;
}
I did this for all menu items. You can see how it works in the web app.