ionic-framework Ionicons Extended usage
Example
Ionic has some CSS components where you can use Ionicons as a default which have preset styling. The range class in the item <div> will apply correct styling to both the input and the icons inside it. Here's an example of a range slider.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Another example of Ionicon usage in Ionic tabs which will create a tab like menu. The tabs-striped tabs-color-assertive classes define the style of the tabs themselves. Icons are used with simple <i> tags and they get their positional styling from the classes applied to the parent divs.
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%23%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bi%2520class%3D%26quot%3Bicon%2520ion-home%26quot%3B%26gt%3B%26lt%3B%2Fi%26gt%3B%2520%2520%2520%2520%2520%2520Home%2520%2520%2520%2520%26lt%3B%2Fa%26gt%3B%2520%2520%2520%2520%26lt%3Ba%2520class%3D%26quot%3Btab-item%26quot%3B%2520href%3D%26quot%3B%23%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bi%2520class%3D%26quot%3Bicon%2520ion-gear-b%26quot%3B%26gt%3B%26lt%3B%2Fi%26gt%3B%2520%2520%2520%2520%2520%2520Settings%2520%2520%2520%2520%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">
