Hi
I want to show item count on cart icon?
can any body let me know how do I do this?
try this
<ion-icon name="ios-cart-outline">2</ion-icon>
this print text next to right side .but to give some more attractive looks to the cart.
I think you need to use the Badge component. See here.
How I place a badge on Icon?
Not sure. You can place them on tabs.
I want so show my cart icon like bellow link
see cart image right-top of the screen .
If I had to guess, this can only be done using custom css. Something like
<ion-icon name="ion-cart-outline" style="position:relative">
<span style="position:absolute; top:5; left:10">2</span>
</ion-icon>
That gave me something like this:
Not perfect but its a good start 
hi @keczan ,thanks for the tips .
I try your suggestion
<ion-navbar *navbar>
<ion-title>
</ion-title>
<ion-buttons end>
<ion-icon name="ion-cart-outline" style="position:relative">
<span style="position:absolute; top:5; left:10">2</span>
</ion-icon>
</ion-buttons>
</ion-navbar>
but can not get desired out put. can you please check once ?to help me to find whats going wrong.
bellow is the screen-shot
My fault. I didn’t realize you wanted it in the navbar. That is a bit of a different animal since the nav bars have more styling applied than in the center of the page.
Try this:
<ion-buttons right>
<button>
<ion-icon name="ios-cart-outline" style="position:relative; font-size:3em;">
<span style="position:absolute; top:-15px; left:5px; font-size:20px !important">2</span>
</ion-icon>
</button>
</ion-buttons>
That gives me this:
Again, not perfect but a good place to start. I would advise to move those stylings out of the page and into the css files as well.
thankx @keczan ,its worked .
1 Like
Hi @keczan if you don’t mind I am asking your help again .
I made some directive for common components
<ion-navbar *navbar hideBackButton class="android-attr">
<common-shopping-cart></common-shopping-cart>
<common-profile-settings></common-profile-settings>
</ion-navbar>
profile-settings-directive.html
<ion-buttons right>
<button>
<ion-icon name="contact" style="position:relative; font-size:2em;"></ion-icon>
</button>
</ion-buttons>
shopping-cart-directive.html
<ion-buttons right>
<button>
<ion-icon name="ios-cart-outline" style="position:relative; font-size:2em;">
<span style="position:absolute; top:-.3em; left:.5em; font-size:15px !important">2</span>
</ion-icon>
</button>
</ion-buttons>
But the two items not placed side-by-side ,one item jump down ,can you please suggest the fix?
Further Investigation
**Case 1 : working **
<ion-navbar *navbar hideBackButton class="android-attr">
<ion-title>Buttons In Components</ion-title>
<ion-buttons start>
<button>
<ion-icon name='contact'></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button>
<ion-icon name='search'></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I inspect above code with fire bug
Case 2 : Not working
<ion-navbar *navbar hideBackButton class="android-attr">
<common-shopping-cart></common-shopping-cart>
<common-profile-settings></common-profile-settings>
</ion-navbar>
I inspect above code with fire bug
look for Case 2 tow Custom Directives placed inside <div class="toolbar-content">
but for Case 1 not.
I think is this the problem?
Yes, the buttons should appears outside of the toolbar content as far as I know.
Can I see the code for the directive?
What version of Ionic 2 are you running?
Hi @keczan I follow http://ionicframework.com/docs/v2/api/components/navbar/Navbar/ approach.
I can’t really help on this one without seeing some code. You are correct that the buttons need to appear outside of the toolbar tag but I don’t know why it is rendering that way
<ion-item>
<ion-icon name="cart" item-left></ion-icon>
<ion-badge item-right>2</ion-badge>
</ion-item>
Limit the width for <ion-item> because it’s 100% by default.
I have exactly the same problem! Did you solve it?
I asked the same thing here
I used @keczan’s idea and added a badge too. Works pretty good! Probably need to make a new shopping cart icon, this one is kinda skinny.
End Result:
6 Likes