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 类，就像使用所有离子图标（例如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;
}

如果你想使用一个图像，你可以在你定义的类中使用它作为背景图像，而不是字体的东西。但您可能必须设置固定的宽度和高度。