Вкладки и вкладка пользовательский значок в ионной 3

Я создаю ионное приложение, в котором я использую ионные вкладки внизу для навигации по всему приложению. Я хочу добавить пользовательский значок SVG в качестве вкладки. Я не знаю, как я могу это сделать, но если есть какое-либо решение, пожалуйста, укажите ссылку или код или любую ссылку на документ.

всем привет!! Я создаю ионное приложение, в котором я использую ионные вкладки внизу для навигации по всему приложению. Я хочу добавить пользовательский значок SVG в качестве вкладки. Я не знаю, как я могу это сделать, но если есть какое-либо решение, пожалуйста, укажите ссылку или код или любую ссылку на документ.

и я также хочу добавить аватар в ионные вкладки.

Источник

3 ответа

Решение

Может быть, вы можете сначала добавить пользовательский значок: Добавить пользовательский значок в Ionic 2

затем используйте атрибут tabIcon в ion-tab:

<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="custom-icon"></ion-tab>
Источник

Это так просто и легко. Вы просто используете этот CSS/SCSS для своего собственного значка.

ion-icon {
&[class*="custom-"] {
    margin: 0 5px 0 0;
    vertical-align: middle;
    $sz: 20px;
    width: $sz;
    height: $sz;
} // custom icons
&[class*="pin"][ng-reflect-is-active="true"] {
    background: url("../assets/imgs/custom-icons/pin_on.png") no-repeat 50% 50%;
    background-size: contain;
}//in case of active
&[class*="pin"][ng-reflect-is-active="false"] {
    background: url("../assets/imgs/custom-icons/pin_off.png") no-repeat 50% 50%;
    background-size: contain;
}//in case of inactive
&[class*="stars"] {
    background: url("../assets/imgs/custom-icons/stars.png") no-repeat 50% 50%;
    background-size: contain;
}

}

и это будет ваш HTML контент. Я привел здесь два примера, один за другим для нормального

<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-pin"></ion-tab>

// another example

<ion-icon name="custom-stars" color="primary"></ion-icon>
Источник

Сначала вы скачиваете нужное семейство шрифтов. чем дать путь в app.css вроде:

@font-face {
  font-family: "Flaticon";
  src: url("../assets/font/Flaticon.eot");
  src: url("../assets/font/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../assets/font/Flaticon.woff") format("woff"),
       url("../assets/font/Flaticon.ttf") format("truetype"),
       url("../assets/font/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

также добавьте этот CSS для каждого, что вы хотите в вашем app.css

.flaticon-stadium:before ,
.ion-ios-flaticon-stadium:before ,
.ion-ios-flaticon-stadium-outline:before ,
.ion-md-flaticon-stadium:before ,
.ion-md-flaticon-stadium-outline:before  {
  font-family: Flaticon;
  content: '\f101';
  font-size: 26px;
}

и на вашей вкладке HTML код здесь

<ion-tabs>
  <ion-tab [root]="tab3Root" tabTitle="Facilities" tabIcon="flaticon-stadium"></ion-tab>
</ion-tabs>
Источник
Другие вопросы по тегам