The Web Tub
Published in

The Web Tub

Customizing Onsen UI Navigator Toolbar’s Icon

Onsen UI supports font-awesome which has 369 icons! That’s alot but no matter how many icons provided, there is no gurantee that it will support your app icon’s need.

What you need to do is specify the css class name in left-button-icon/right-button-icon.

<ons-navigator right-button-icon="my-icon">

Then in your css file. Specify the properties of your css class name as shown below.


Use css pseudo class as you normally do in css. In the above case, I use :active pseudo class.

That’s it! Happy coding!

Originally published at on February 14, 2014.




Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onsen UI & Monaca Team

Onsen UI & Monaca Team

Team of developers from Onsen UI and Monaca

More from Medium

How to accomplish “Voronoi/Delaunay” transition animation using d3 and react-spring

How to unzip an uploaded zip folder in Vue js using JSZip

Masai Collaboration Project- HomeDepot Clone

Introduction to Tonic — the component framework