在ionic2中使用带有标签的自定义图标答案

【问题标题】：Use custom icons with tabs in ionic2在ionic2中使用带有标签的自定义图标
【发布时间】：2017-07-03 18:28:48
【问题描述】：

我需要在 ionic 2 中使用带有标签的海关图标。

此外，如果选择了选项卡，我需要更改标题颜色和图标。

例子：

ionic Tabs

【问题讨论】：

我认为我们无法在自动取款机上执行此操作，请看github.com/driftyco/ionic/issues/7732
请查看我的回答，希望对您有所帮助:) stackoverflow.com/questions/47152672/…

标签： ionic-framework ionic2 ionicons

【解决方案1】：

这是我在论坛https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36找到的最简单的方法。

在您的 app.scss 文件中，添加以下代码：

ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="custom-icon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="custom-icon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

然后在您的模板中，您可以使用以下 HTML 来创建图标：

<ion-icon class="custom-icon1"></ion-icon>

在其他问题中，人们建议使用基于字体的方法。不过，这个答案的使用要简单得多，只要您不添加数百个图标就可以了。需要注意的是，每个图像都是作为单独的请求发送的，与字体方法一样，所有图像都包含在一个文件中，因此效率会更高。

【讨论】：

这在 Android 中不起作用。背景：当前颜色；涵盖一切

【解决方案2】：

3 个海关图标示例

scss 文件

.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
        .tab-button-icon {
            background-repeat:no-repeat;
            background-position:center;
            height:24px;
            width:24px;
            background-size:contain;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            &:before {
                display:none;
            }
        }
    }

    .tabs-ios {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }
     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-md {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-wp {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

HTML 文件

  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>

【讨论】：

当我使用ionic cordova run android -lc 运行但图标在生产版本中没有显示时，它可以工作。有什么解决办法吗？

【解决方案3】：

查看 ionic 2 here 的 tabs 组件。

请参阅this，了解如何使用自定义图标以及如何在选项卡上显示它们。

另外，我认为您可以通过 .animate 类更改标题和图标的 CSS 属性。

如果不是，则从您的浏览器窗口中检查元素，并找到一个在选择选项卡时会发生变化的类。您可以通过ionic serve在浏览器中运行您的项目。

【讨论】：