ionic-framework Ionicons Extended usage

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!


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>

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="#">
      <i class="icon ion-home"></i>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-b"></i>

Got any ionic-framework Question?