Text Over Icon

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:

image

Not perfect but its a good start :slightly_smiling:

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:
image

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>

image
I inspect above code with fire bug

image

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>

image

I inspect above code with fire bug

image

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.
image

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:
image

6 Likes