CodePen Embed - DS 8.0 - Icon Count sc-icon-count (backup)

<!--
<div class="sca-dropdown sca-dropdown--floating sca-dropdown--on-hover scw-announcement__dropdown dropdown scj-dropdown-on-hover mt-4">
  
  <div class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Open shopping cart">

    <a class="sca-icon-count sca-dropdown__icon-count" href="#">
      
      <i class="fa fa-envelope fa-2x sca-icon-count__icon">  
        
        <span class="sca-badge sca-icon-count__badge">0</span>
      
      </i>
    
    </a>
    
  </div>
  
</div>
-->

<h2>DEVELOPMENT</h2>

    <a class="sc-icon-count">
        <i class="fa fa-envelope fa-2x" aria-hidden="true">
            <span class="badge">2</span>
        </i>
    </a>

/* scss/Atoms/_IconCount.scss */
/*.sca-icon-count {
    @extend .position-relative;
    color: $sc-icon-count-color !important;
}

.sca-icon-count__badge {
    @extend .position-absolute;
    right: $sc-icon-count-badge-right;
    top: $sc-icon-count-badge-top;
    @extend .badge-secondary;
}*/

$sc-icon-count-font-size: $font-size-sm;
$sc-icon-count-bg: $danger;
$sc-icon-count-color: $white;

.sc-icon-count {
    text-decoration: none;

    i {
        position: relative;

        .badge {
            font-size: $sc-icon-count-font-size;
            position: absolute;
            top: 0;
            left: 100%;
            transform: translate(-50%, -50%);
            border-radius: $border-radius-pill;
            background-color: $sc-icon-count-bg;
            color: $sc-icon-count-color;
        }
    }
}

View Compiled

This Pen is owned by SmarterCommerce on CodePen.

See more by @smartercommerce on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.