angular - ionic 3中的选项卡和选项卡自定义图标

Question

我正在构建一个 ionic 应用程序，其中我在底部使用 ionic 选项卡来导航整个应用程序。我想添加自定义 svg 作为选项卡图标。我不知道我该怎么做，但如果有任何解决方案，请提供链接或代码或文档的任何引用。

你好!!我正在构建一个 ionic 应用程序，其中我在底部使用 ionic 选项卡来导航整个应用程序。我想添加自定义 svg 作为选项卡图标。我不知道我该怎么做，但如果有任何解决方案，请提供链接或代码或文档的任何引用。

而且我还想在 ionic 标签中添加头像。

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>