ionic 3中的标签和标签自定义图标答案

【问题标题】：tabs and tab custom icon in ionic 3ionic 3中的标签和标签自定义图标
【发布时间】：2018-07-07 03:55:56
【问题描述】：

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

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

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

【问题讨论】：

标签： angular ionic-framework ionic3 ionic-tabs

【解决方案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>

【讨论】：

这应该被标记为答案，它比选择的那个更有帮助，谢谢 Arindam！

【解决方案2】：

首先，您下载所需的字体系列。而不是在 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;
}

还为您的 app.css 中所需的每个添加此 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>

【讨论】：

【解决方案3】：

也许你可以先添加自定义离子图标：Add Custom Icon in Ionic 2

然后在 ion-tab 中使用 tabIcon 属性：

<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="custom-icon"></ion-tab>

【讨论】：