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.

css

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 onsen.io on February 14, 2014.

Like what you read? Give Onsen UI & Monaca Team a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.