Onsen UI CSS Component Icon Only Tabbar

Onsen UI is a free open-source HTML5 framework for creating innovative and usable user interfaces (UI). It also simplifies user interface design, letting app developers concentrate on the program's functionality.

The Tabbar is a CSS component that allows you to create a navigation bar with tabs for easy navigation. This is commonly used to create a navigation bar for a mobile user interface. The Icon Only Tabbar is a form of the tab bar in which only icons can be added to all of the navigation tabs and there will be no textual title to the tab.

Onsen UI CSS Component Icon Only Tabbar Used Classes:

• tabbar: This class is added to the whole div container that will hold the whole navigation bar.
• tabbar__item: This class is added to the tabs of the navigation bar.
• tabbar__button: This class is added to the button elements which can be clicked to change the tabs of the navigation bar. 
• tabbar__icon: This class is added to the icons of the button elements which can be clicked to change the tabs of the navigation bar.

Syntax:

<div class="tabbar">
 <label class="tabbar__item">
 <input>
 <button class="tabbar__button">
 <i class="tabbar__icon"></i>
 </button>
 </label>
</div>

Example: This code below demonstrates the Icon-only tab bar using the above-mentioned classes.

Output:

Example 2: This code below demonstrates the Icon-only tab bar using the above-mentioned classes.

Output:

Reference: https://onsen.io/v2/api/css.html#tabbar-category