如何上傳我的自定義圖標離子框架？

Question

我創建我的離子的應用程序，這是我的第一個應用程序，我需要添加我的自定義圖標在此應用中，我砍了，我需要在攝影店的所有圖標，然後我用他們通過這種方式：

.my-star-icon { 
    content: url('/img/selected-icon.png'); 
    width: 22px; 
} 

我沒有用我的應用程序導航標籤：

<ion-tabs class="tabs-icon-top" id="tab"> 
 

 
    <ion-tab title="Feed" icon="ion-social-rss" 
 
    href="#/app/feed"> 
 
    <ion-nav-view name="feed-tab"></ion-nav-view> 
 
    </ion-tab> 
 

 
    <ion-tab title="Selected" icon="my-star-icon" 
 
    href="#/app/selected"> 
 
    <ion-nav-view name="selected-tab"></ion-nav-view> 
 
    </ion-tab> 
 

 
    <ion-tab title="Actions" icon="ion-ios-list-outline" 
 
    href="#/app/actions"> 
 
    <ion-nav-view name="actions-tab"></ion-nav-view> 
 
    </ion-tab> 
 

 
    <ion-tab title="Charts" icon="ion-arrow-graph-up-right" 
 
    href="#/app/charts"> 
 
    <ion-nav-view name="charts-tab"></ion-nav-view> 
 
    </ion-tab> 
 

 
    <ion-tab title="More" icon="ion-more" 
 
    href="#/app/more"> 
 
    <ion-nav-view name="more-tab"></ion-nav-view> 
 
    </ion-tab> 
 

 
</ion-tabs>

當我加入，而不是圖標名稱班裏它出現在我的導航菜單，但它的工作原理奇怪，沒有焦點和懸停樣式不起作用，不明白爲什麼，也許我應該以某種方式下載我的離子應用程序中的這些圖標？

Answer 1

嘗試使用此服務

https://icomoon.io/

它提供的css文件和字體容易包含在項目

Answer 2

像這樣：

<ion-tab title="Actions" icon="actions" href="#/app/actions"> 
    <ion-nav-view name="actions-tab"></ion-nav-view> 
    </ion-tab> 

然後在CSS：

.actions{ 
    background-image: url('/img/actions.png'); 
} 

/* optional */ 
.tab-item .icon { 
    background-repeat: no-repeat; 
    background-position:center; 
    background-size: contain; 
} 

並根據需要調整大小。