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

Configure vite and storybook to respect alias of tsconfig.json

Testing a React Component Library package locally, using Yarn and Craco

React Component Libraries

Considerations for writing React Components — Part 01: Introduction

Are you looking to quickly prototype a SvelteKit app? Sketch with Svetch!