I'm creating elements like that:
<a href="#nav-panel" class="ui-btn-left ui-btn ui-btn-c ui-corner-all ui-btn-icon-notext ui-icon-bars ui-alt-icon ui-nodisc-icon"></a>
It works ok on browser like Chrome, Android Browser, Opera, etc. but on Opera Mini icons are not visible. It's just an empty space.
jQuery Mobile version is 1.4.5
Icons on websites such as fontawesome and bootstrap often make use of using a custom font which is then setup by using the font-face
CSS rule. font-face
is not currently supported by Opera Mini.
http://caniuse.com/#feat=fontface
Reading the following link, it looks like Opera Mini does not allow custom fonts and instead uses fonts available on the device.
http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/#typography
Have you tried setting Use bitmap fonts for complex scripts
in the opera:config
, maybe this will work?
http://blog.tavultesoft.com/2014/07/enable-custom-fonts-in-opera-mini.html
Edit:
Appears the issue was that jQuery mobile uses .SVG
for the icons and falls back to .png
if that fails. The path was not set up correctly for the .png
.