1

My boss wants me to do something spiffy and creative with cart counter/badge on our premium theme package we sell. I told him why not switch our text "cart" to a shopping cart icon - the e-Com platform we develop for already gives us unlimited access to Font Awesome, which is comprehensive and great as a way to accomplish vector/editable text art without having to manage images. Maybe something like this: Shopping cart icon with counter badge layered on it, offset to lower-right.

But trying to retrofit the native cart counter functionality we're given, with the example Font Awesome gives has proven sort of difficult. From our codebase:

<li><a href="cart">
   <span style="font-size: 20px;"><i class="far fa-shopping-cart"></i></span>&nbsp;
   <span ng-if="currentOrder.LineItems.length" ng-bind="cartCount" class="badge"></span>
</a></li>

This displays the cart counter badge to the right of the shopping cart icon just fine, but I want to make it extra jazzy. I want to layer the counter badge on top of the cart icon and offset it a little bit. Font Awesome gives a great example with layering a cart counter, but it's with a static number:

  <span class="fa-layers fa-fw" style="background:MistyRose">
  <i class="fas fa-envelope"></i>
  <span class="fa-layers-counter" style="background:Tomato">1,419</span>

I'm having trouble using their example within the context of my original scope when I try and 'merge' the two. In other words, I want to substitute the "1,419" in Font Awesome's example, with our dynamic counter; but I'm having issues.

Any ideas? I can provide any supporting code base HTML/CSS/JS you ask for.

Thanks! Kyle

kylejpatrick
  • 11
  • 3
  • Hi Kyle, I see this is your 1st question here - sp welcome to stackoverflow! I'd be happy to help and look into this - but you could help any helpers by providing a repro that showed the wrong behaviour ;) – MBaas Apr 16 '20 at 17:00
  • MBaas - I'd be happy to, but I'm light on lingo. By repro, do you want a screenshot of the output of the erroneous code? Or lmk what you need. Thanks! – kylejpatrick Apr 16 '20 at 19:20
  • A "repro" should help to reproduce the problem, so that means HTML & JS, any custom CSS (can't upload resources here, but you can get FA-Free from a public repository). For an example, have a look at this question: https://stackoverflow.com/questions/61065667/differently-colored-sections-on-a-single-icon – MBaas Apr 17 '20 at 16:20
  • @MBass I decided trying to retrofit Font Awesome might be alot of work so I decided to see if I could take the native functionality and use css to nudge the cart badge. I was able to use <....style="position: relative; left: -15px; top: 5px;"> and layer it on top the cart icon. I'm going to test it to make sure it doesn't get skewed on different screen sizes but at this point I'm going to stick with this. Just an FYI. – kylejpatrick Apr 21 '20 at 01:32
  • Fine. I'm glad it solved the problem for you :) – MBaas Apr 21 '20 at 15:28

0 Answers0