在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