ripplelink menue icons with numbers

[hinneLinks]

I'm trying to combine the "ripplelink" menue from the Showcase with a numbered icon, like in the shopping cart.
It works, but it seems the round background of the menue is cutting off the number:


This is my Code:

Code: Select all

<ul id="top-menu">
	<li>
		<a class="ripplelink">
			<i class="icon-head">
				<span class="CartText White">12</span>
			</i>
			<span class="ShowOnMobile">User Settings</span>
		</a> 
	</li>
</ul>

I tried a couple things with div's, z-index etc. but none work as expected.
Do you Guys have a idea?

[mert.sincan]

Please try with;

topbar.xhtml

Code: Select all

<ul id="top-menu">
    <li>
       <a class="ripplelink Test">
          <i class="icon-head"><span class="CartText White">12</span></i>
         <span class="ShowOnMobile">User Settings</span>
      </a>
   </li>
</ul>

CSS

Code: Select all

.Test.ripplelink {
   width: 52px !important;
}
.Test.ripplelink .CartText {
   position: relative;
   top: -12px;
}

[hinneLinks]

That works, thanks for the quick response!

[mert.sincan]

Glad to hear, thanks