离子3中的选项卡和选项卡自定义图标

Question

我正在构建一个离子应用程序,我在底部使用离子选项卡导航整个应用程序..我想添加自定义svg作为选项卡图标.我不知道如何做到这一点,但如果有任何解决方案,请提供链接或代码或文档的任何参考.

嗨,您好!!我正在构建一个离子应用程序,我在底部使用离子选项卡导航整个应用程序..我想添加自定义svg作为选项卡图标.我不知道如何做到这一点,但如果有任何解决方案,请提供链接或代码或文档的任何参考.

我还想在离子标签中添加头像.

Answer 1

它简单易行.您只需将此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>