我正在构建一个离子应用程序,我在底部使用离子标签来导航整个应用程序。我想将自定义svg添加为标签图标。我不知道我该怎么做,但如果有任何解决方案,请提供链接或代码或文档的任何参考。
你好呀!!我正在构建一个离子应用程序,我在底部使用离子标签来导航整个应用程序。我想将自定义svg添加为标签图标。我不知道我该怎么做,但如果有任何解决方案,请提供链接或代码或文档的任何参考。
我还想在离子标签中添加头像。
我正在构建一个离子应用程序,我在底部使用离子标签来导航整个应用程序。我想将自定义svg添加为标签图标。我不知道我该怎么做,但如果有任何解决方案,请提供链接或代码或文档的任何参考。
你好呀!!我正在构建一个离子应用程序,我在底部使用离子标签来导航整个应用程序。我想将自定义svg添加为标签图标。我不知道我该怎么做,但如果有任何解决方案,请提供链接或代码或文档的任何参考。
我还想在离子标签中添加头像。
它是如此简单和容易。您只需将此 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>
也许你可以先添加自定义离子图标:Add Custom Icon in Ionic 2
然后在 ion-tab 中使用 tabIcon 属性:
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="custom-icon"></ion-tab>
首先,您下载所需的字体系列。而不是在 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>