Search code examples
htmlcssjquery-mobileopera-mini

Missing jQuery Mobile icons on Opera Mini


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


Solution

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