扩展使用

Ionic 有一些 CSS 组件，你可以使用 Ionicons 作为默认设置，具有预设样式。项目 <div> 中的 range 类将对输入和其中的图标应用正确的样式。这是一个范围滑块的示例。

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

在 Ionic 选项卡中使用 Ionicon 的另一个例子，它将创建一个像菜单一样的选项卡。tabs-striped tabs-color-assertive 类定义选项卡本身的样式。图标与简单的 <i> 标签一起使用，并且它们从应用于父 div 的类中获得它们的位置样式。

<div class="tabs-striped tabs-color-assertive">
  <div class="tabs">
    <a class="tab-item" href="#">
      <i class="icon ion-home"></i>
      Home
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-b"></i>
      Settings
    </a>
</div>