Как я могу загрузить свои пользовательские значки в ионной структуре?

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

При необходимости отрегулируйте размеры.