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;
}

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

使用ionic.js和CSS设置图标

1 个答案: