html - 使用 ionic.js 和 CSS 设置图标

Question

如何使用 CSS 在选项卡中设置自己的图标？现在我默认使用 icon-on="icon ion-ios7-clock"，但我想使用我自己的。

<ion-tab title="Фильтр" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline"
             on-select="places.onFilterTabPress()">

Answer 1

您必须定义自己的图标 css 类，就像您使用的所有 ionic 图标(例如 ion-ios7-clock)一样。它实际上是一种带有图标的字体。

如果您有一种字体想用作您自己的图标，那么您只需复制在 ionic.css 中找到的类:

.my-custom-icon:before {
      content: "MyIconFontContent";
      display: inline-block;
      font-family: "MyIconFont";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-rendering: auto;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

如果您想使用图像，您可以在定义的类中将其用作背景图像，而不是字体内容。但您可能必须设置固定的宽度和高度。