[英]tabs and tab custom icon in ionic 3
我正在構建一個離子應用程序,我在底部使用離子選項卡導航整個應用程序..我想添加自定義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>
也許你可以先添加自定義離子圖標: 在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.