Использование Font Awesome со счетчиком корзины - PullRequest
Новая
       39

Использование Font Awesome со счетчиком корзины

0 голосов
/ 15 апреля 2020

Мой босс хочет, чтобы я сделал что-то стильное и креативное с помощью счетчика / значка корзины в нашем премиальном пакете тем, который мы продаем. Я сказал ему, почему бы не переключить наш текст «корзина» на значок корзины покупок - платформа e-Com, для которой мы разрабатываем, уже дает нам неограниченный доступ к Font Awesome, который является всеобъемлющим и прекрасным способом достижения sh vector / editable Текстовое искусство без необходимости управлять изображениями. Может быть, что-то вроде этого: Значок корзины покупок со слоем счетчика, со смещением в нижний правый угол.

Но мы пытаемся наладить функциональность встроенного счетчика корзины, которую мы дали, на примере Удивительный шрифт оказался довольно сложным. Из нашей кодовой базы: 

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

Это показывает значок счетчика корзины справа от значка корзины покупок, но я хочу сделать его более джазовым. Я хочу наложить значок счетчика поверх значка корзины и немного сместить его. Шрифт Awesome дает отличный пример с наложением счетчика корзины, но с номером c: 

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

У меня проблемы с использованием их пример в контексте моей первоначальной области, когда я пытаюсь «объединить» их. Другими словами, я хочу заменить «1,419» в примере Font Awesome на наш счетчик динамич c; но у меня проблемы.

Есть идеи? Я могу предоставить любую вспомогательную кодовую базу HTML / CSS / JS, которую вы просите.

Спасибо! Kyle

...