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

Question

我需要使用带有离子2标签的海关图标。

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

实施例：

ionic Tabs

Answer 1

退房的离子2 here的tabs组件。

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

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

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

Answer 2

这是我找到的最简单的方法，来自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 name="custom-icon1"></ion-icon> 

在其他问题，人们会提出一种基于字体的方法。这个答案虽然不太复杂，但只要你不添加数百个图标，你应该没问题。需要注意的是，每个图像都作为一个单独的请求发送，与字体方法一样，所有图像都包含在一个文件中，因此效率会更高一些。

Answer 3

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> 

源&更详细地：https://forum.ionicframework.com/t/ionic2-tutorial-tabs-with-custom-active-inactive-icons/75163